當點擊一個，禁用其他

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"; 
} 

下面是一個例子ONFIDDLE。

我「的問題是」我有什麼做的解決？
我應該注意什麼？

Answer 1

首先，你需要解決您的HTML becaue你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

這隻使用沒有JQuery的JavaScript，但如果您使用的是JQuery，那麼您可以在這裏使用它。代碼更短，更容易遵循。

這裏是一個jQuery版本：

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

注意：此記錄點擊處理程序，這樣你就可以擺脫「點擊」 attirbutes的。

jsfiddle

Answer 2

您必須選擇所有其他點並將其背景設置爲無。

或者記住選擇了哪個點，然後選擇另一個點，最後刪除背景並記下當前點，然後將其背景設置爲紅色。

見琴：http://fiddle.jshell.net/399Dm/5/

Answer 3

我有固定的撥弄使其作品希望你的計劃。 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 4

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 5

我有一個稍微不同的方法比@atlavis但類似的結果。

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

Answer 6

起初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 7

如果你可以看看下面的jsfiddle，我用jQuery來得到你想要的。