Question

我正在创建一个包含div的表格，其中已有背景图片。这些课程是＆＃34; sw＆＃34;，＆＃34; sl＆＃34;，＆＃34; so＆＃34;，＆＃34; sa＆＃34;，＆＃34; sn＆＃34;和＆＃34;苏＆＃34 ;.我说你可以点击div，右边会显示该div的信息。

但是，我尝试在这些div中添加一个悬停元素，当我不添加onclick函数时，它会起作用。使用onclick功能，没有悬停可将div更改为不同的背景图像。当我点击某个div时，背景图像保持不变。

单击div时如何更改背景图像？

这是我的HTML代码：

<table width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td><div class="sw" onclick="show(0)"></div></td>
        <td><div class="sl" onclick="show(1)"></div></td>
        <td id="info" rowspan="3" style="width:325px;"></td>
    </tr>
    <tr>
        <td><div class="so" onclick="show(2)"></div></td>
        <td><div class="sa" onclick="show(3)"></div></td>
    </tr>
    <tr>
        <td><div class="sn" onclick="show(4)"></div></td>
        <td><div class="su" onclick="show(5)"></div></td>
    </tr>
</table>

这是我的JavaScript代码：

function show(num) {
    var outputInfo = "";
    if(num == 0) {
        outputInfo += 'INFO HERE';
    }
    else if(num == 1) {
        outputInfo += 'INFO HERE';
    }
    ...
    document.getElementById("info").innerHTML = outputInfo;
}

哦，顺便说一句，我的背景图像用在CSS部分上面，上面的所有类共享相同的图像但是它们被分配了不同的位置。

如果有另一种点击div的方法，有没有办法将图像显示为单独的背景？

Answer 1

您可以在javascript / jQuery中创建一个简单的onclick函数（我将此代码与jQuery 1.7.1一起使用），如下所示：

$('#changeMe').on('click', function() {
    $('#changeMe').css('background-image', 'url(urlhere)');
})

其中 #changeMe 是div id

＆＃13;

$('#changeMe').on('click', function() {
    $('#changeMe').css('background-image', 'url(http://firefoxzeneize.altervista.org/FirefoxLogo.png)');
})

＆＃13;

div{
    width : 512px;
    height : 512px;
    background-image : url("https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20170911_Google_Chrome_logo_vector_download.png");

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<div id="changeMe"></div>

＆＃13;

Answer 2

嗯，您的代码应如下所示：

document.getElementById("info").style.backgroundImage = "url('image.png')";

这里我假设info是您要更改背景的div的ID。

Answer 3

这个代码片段应该可以。我已经链接了几个随机图像，所以你可以测试它。通过单击div，信息显示在右侧，div的背景将更新。通过传递'this'关键字作为show方法的参数，您可以避免依赖于div的id的逻辑。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.sw{
background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}
.sl{
background-image: url("https://mdn.mozillademos.org/files/7693/catfront.png");
}
</style>
<script>
function show(num, t) {
    var outputInfo = "";
    if(num == 0) {
        outputInfo += 'This is the information about the image now displayed in div0';
        var newUrl='url("http://www.librosweb.es/website/css/images/logo.gif")';
        t.style.backgroundImage= newUrl; 
    }
    else if(num == 1) {
        outputInfo += 'This is the information about the image now displayed in div1' ;
        var newUrl='url("http://www.librosweb.es/website/css/images/logo.gif")';
        t.style.backgroundImage= newUrl; 
    }
    document.getElementById("info").innerHTML = outputInfo;
}
</script>

<table width="100%" cellpadding="0" cellspacing="0" >
    <tr>
        <td style="border: 1px solid red"><div class="sw" onclick="show(0, this)"></div></td>
        <td style="border: 1px solid red"><div class="sl" onclick="show(1, this)"></div></td>
        <td style="border: 1px solid red" id="info" rowspan="3" style="width:325px;"></td>
    </tr>
</table>
</body>
</html>

Answer 4

而不是使用onclick，也许尝试使用Tomm所做的事情。我可能鼓励你为所有这些id元素创建一个类。由于在单击该功能之前您有原始背景的共享背景图像，因此我添加了背景位置。这是我通过制作一个函数来为脚本做的，我将其置于主体的onload中（第一部分用于单击背景，第二部分用于原始背景，仅显示未点击的部分）：

function onloadPage() {
    // first portion
    $('#sw').click(function() {
        $(this).css("background-position", "0 0");
        document.getElementById("info").innerHTML = 'INFO HERE';
    });
    $('#sl').click(function() {
        $(this).css("background-position", "0 0");
        document.getElementById("info").innerHTML = 'INFO HERE';
    });
    ...

    // second portion
    $('.classname').on('click', function(e) {
        if(!$(e.target).closest('#sw').length) { $('#sw').css("background-position", '0 0'); }
        if(!$(e.target).closest('#sl').length) { $('#sl').css("background-position", '0 0'); }
        ...
}

然后是HTML：

<table width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td><div class="classname" id="sw" style="background-position:0 0;"></div></td>
        <td><div class="classname" id="sl"></div></td>
        <td id="classinfo" rowspan="3" style="width:325px;"></td>
    </tr>
</table>

显然，您必须根据需要调整背景位置。

单击div时更改背景图像？

4 个答案: