Когда один щелкнут, отключите другой

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

Прежде всего, необходимо исправить 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

Это использует только 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 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 - Ваша разметка является недопустимым, поскольку у вас есть повторяющиеся идентификаторы. Сделайте вместо них классы, как показано ниже.

<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

На первый идентификатор должен быть уникальным для каждого элемента.

<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, чтобы получить то, что вы хотите.