Question

所以我的网站上有一个迷你幻灯片菜单，有一个菜单可以选择你想要阅读的内容。点击有点，当你点击它时，点得到一个红色背景。但是有一个问题当我点击一个点然后另一个点时，第一个点击的点必须失去他的背景。

这是我的HTML：

<div id="slide_button" onClick="clicked(this);"><dir class="button_1"></dir></div>
<div id="slide_button" onClick="clicked(this);"><dir class="button_2"></dir></div>
<div id="slide_button" onClick="clicked(this);"><dir class="button_3"></dir></div>
<div id="slide_button" onClick="clicked(this);"><dir class="button_4"></dir></div>
<div id="slide_button" onClick="clicked(this);"><dir class="button_5"></dir></div>

这是我的JS：

function clicked(slide_button) {
    slide_button.getElementsByTagName("dir")[0].style.backgroundColor="red";
}

这是一个例子 FIDDLE。

我的“问题”是我要解决的问题吗？我应该注意什么？

Answer 1

您必须选择所有其他点并将其背景设置为无。

或者记住选择了哪个点，然后选择另一个点，只删除最后一个背景并记住当前点，然后将其背景设置为红色。

请参阅小提琴：http://fiddle.jshell.net/399Dm/5/

Answer 2

首先，您需要修改HTML，因为id值不是唯一的。实际上，您甚至不需要id值，因此您应该使用“slide_button”作为类。然后，您可以使用它来选择所有按钮：

<div onClick="clicked(this);" class="slide_button"><dir></dir></div>
<div onClick="clicked(this);" class="slide_button"><dir></dir></div>
<div onClick="clicked(this);" class="slide_button"><dir></dir></div>
<div onClick="clicked(this);" class="slide_button"><dir></dir></div>
<div onClick="clicked(this);" class="slide_button"><dir></dir></div>

现在需要更改CSS，因此“slide_button”是一个类选择器，而不是id选择器：

.slide_button {
    display: inline-block;
}

至于清除背景，在将选定的红色着色之前清除所有背景：

function clicked(slide_button) {
    var buttons = document.getElementsByClassName('slide_button');
    for(var i = 0; i < buttons.length; i++) {
        buttons[i].getElementsByTagName('dir')[0].style.backgroundColor = '';
    }
    slide_button.getElementsByTagName('dir')[0].style.backgroundColor = 'red';
}

jsfiddle

这只使用JavaScript而没有JQuery，但是如果你使用的是JQuery，你也可以在这里使用它。代码更短，更容易理解。

这是一个JQuery版本：

$(function() {
    $('.slide_button').click(function() {
        var $button = $(this);
        $button.children(':first').css({ backgroundColor: 'red' });
        $button.siblings().children(':first').css({ backgroundColor: '' });
    }); 
});

注意：这会注册一个点击处理程序，因此您可以摆脱“onclick”attirbutes。

jsfiddle

Answer 3

首先，每个元素的id应该是唯一的。

<div class="slide_button"><dir class="button"></dir></div>
<div class="slide_button"><dir class="button"></dir></div>
<div class="slide_button"><dir class="button"></dir></div>
<div class="slide_button"><dir class="button"></dir></div>
<div class="slide_button"><dir class="button"></dir></div>

其次，如果您希望以后删除背景颜色，则应存储被点击元素的引用，而不是内联事件处理程序或绑定所有元素，如果您使用事件委派将更好。

Demonstration

(function () {
    "use strict";

// getting parent node of divs, due to bind click event. then 
    var ele = document.querySelector(".slide_button").parentNode, 
        prev = null; // store previous clicked element

    ele.addEventListener("click", clickHandler); // event handler.

    function clickHandler(e) {
        var t = e.target; // get target of clicked element

        // filter by target node name and class. edit: removed class checking
        if (t.nodeName.toLowerCase() === "dir") {
            // checking value of prev !== null and it's not same element.
            if (prev && prev !== t) {
                prev.style.backgroundColor = "";
            }
            prev = t; // store clicked element
            t.style.backgroundColor = "red";
        }
    }
}());

Answer 4

我已经修好了小提琴，以便按计划行事。 http://jsfiddle.net/399Dm/8/你去了！

var forEach = function(ctn, callback){
    return Array.prototype.forEach.call(ctn, callback);
}

function clear(element, index, array) {
  element.getElementsByTagName("dir")[0].style.backgroundColor="";
}

function clicked(slide_button) {
    forEach(document.getElementsByClassName("slide_button"), clear);
    //.style.backgroundColor="";
    slide_button.getElementsByTagName("dir")[0].style.backgroundColor="red";
}

Answer 5

<强> JSFIDDLE DEMO

的jQuery

$('.slide_button').click(function(){
    $('.slide_button dir').css("background-color", "inherit");
    $(this).find('dir').css("background-color", "red");
});

HTML - 您的标记无效，因为您有重复的ID。如下所示，让他们成为课程。

<div class="slide_button" >
    <dir class="button_1"></dir>
</div>
<div class="slide_button">
    <dir class="button_2"></dir>
</div>
<div class="slide_button">
    <dir class="button_3"></dir>
</div>
<div class="slide_button">
    <dir class="button_4"></dir>
</div>
<div class="slide_button">
    <dir class="button_5"></dir>
</div>

CSS更改

.slide_button {
    display: inline-block;
}

Answer 6

我的方法与@atlavis略有不同，但结果相似。

http://fiddle.jshell.net/2AGJQ/

Answer 7

如果您可以查看以下jsfiddle，我使用jQuery来获得您想要的内容。

单击一个时，禁用另一个

7 个答案: