Question

我有以下代码

<HTML>
<HEAD>
<style type="text/css">
.setbgcolor{
background-color:blue;

}

</style>
<script type="text/javascript">
function setbg(id){
document.getElementById(id).className = "setbgcolor";

}
</script>
</HEAD>
<BODY>
<div onclick="setbg(this.id)" id="bgcolor">Label1</div>
<div>Label2</div>
</BODY>
</HTML>

现在，问题是 - 当我点击Label2时，应该从第一个div中删除背景颜色，并应该应用于第二个div。有人可以帮助我吗？

Answer 1

在JavaScript中可能没有onunclick这样的事件;有blur/onblur，但这需要元素在被触发之前具有焦点。

也就是说，假设您希望一次只突出显示一个div，以下情况有效，尽管您必须根据具体情况定制它需要：

var buttons = document.getElementsByClassName('button'), curHighlights;

for (i=0; i<buttons.length; i++){
    buttons[i].onclick = function(){
        curHighlights = document.getElementsByClassName('bgcolor');
        if (curHighlights.length) {
            for (h=0; h<curHighlights.length; h++){
                // warning: the following removes _all_ class-names
                curHighlights[h].removeAttribute('class');
            }
        }
            this.className = 'bgcolor';
            this.setAttribute('data-state','1');

    };
}

JS Fiddle demo

我已从内嵌html中删除了onclick事件处理程序，这使得它更容易维护，尽管它看起来确实非常混乱。

然而，为了比较，使用jQuery可以将上述内容压缩为：

$('.button').click(
    function(){
        $('.bgcolor').removeClass('bgcolor');
        $(this).addClass('bgcolor');
    });

JS Fiddle demo

Answer 2

尝试查看jQuery。它会让你的生活更轻松。

Answer 3

可能你需要一个存储先前点击的div的变量。

例如：

var previouslyClickedDiv = null;

function setbg(id){
    if (previouslyClickedDiv) { previouslyClickedDiv.className = ""; }
    var div = document.getElementById(id);
    div.className = "setbgcolor";
    previouslyClickedDiv = div;
}

当然你可以使用更短的变量名！

div标签的问题

3 个答案: