javascript - 单击div时更改背景图像？

Question

我正在创建一个带有 div 的表格，其中已经有背景图像。这些类是“sw”、“sl”、“so”、“sa”、“sn”和“su”。我让您可以单击该 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

也许可以尝试使用 Tomm 所做的事情，而不是使用 onclick。我可能鼓励您为所有这些 id 元素创建一个类。由于在单击该函数之前您拥有原始背景的共享背景图像，因此我添加了背景位置。以下是我通过创建一个放入正文加载中的函数对脚本所做的操作(第一部分用于单击时的背景，第二部分用于原始背景，并且仅显示未单击的背景):

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>

显然，您必须将背景位置调整为您需要的外观。