настройки JQuery стиль

Question

У меня есть проблемы с ниже JQuery сценария:

$('span').click(function(){ 
    var info = $(this).attr("rel"); 
    var reference = this; 
    if ($(this).hasClass('listed')) { 
     // alert('follow'); 
     $(".unlisted").addClass("unlisted-bw"); 
     $(".special").addClass("special-bw"); 
    } 

    if ($(this).hasClass('special')) { 
     // alert('follow'); 
     $(".unlisted").addClass("unlisted-bw"); 
     $(".listed").addClass("listed-bw"); 
    } 

    if ($(this).hasClass('unlisted')) { 
     // alert('follow'); 
     $(".listed").addClass("listed-bw"); 
     $(".special").addClass("special-bw"); 
    }    
}); 

Я хочу, чтобы работать таким образом, что, если я нажму на одном пролете (special, listed или unlisted) Другие пролетах до быть неактивным. Как я могу сделать это с помощью jQuery?

Я создал этот скрипт, но не работал правильно. http://jsfiddle.net/3nsrd/

Answer 1

Вы можете выбрать все другие диапазоны с использованием .siblings(). Вот пример:

$('span').click(function(e) { 
    $(this).removeClass('special-bw') 
      .siblings("span") 
      .addClass('special-bw'); 
});​ 

DEMO http://jsfiddle.net/3nsrd/4/

Это не включает в себя добавление их отдельных классов при наведении курсора мыши, которые можно было бы сделать, выполнив $.each по каждому из братьев и сестер и использовать их название (или другой атрибут)

$('span').click(function(e) { 
    //get the name of the selected span 
    selectedSpan = $(this).attr("title"); 

    //remove class of selected span -bw (i.e. special-bw); 
    $(this).removeClass(selectedSpan+'-bw') 
      .siblings("span").each(function(){ 
      //foreach of the other spans, add their name + bw 
      $(this).addClass($(this).attr("title")+'-bw'); 
     }); 
});​ 

DEMO: http://jsfiddle.net/3nsrd/6/

Answer 2

Я думаю, что эта скрипка будет отвечать вашим потребностям:

http://jsfiddle.net/3nsrd/3/

$('span').click(function(){ 
    var parent = $(this).parent(); 

    var classes = ['listed', 'special', 'unlisted']; 

    for (var i = 0; i < classes.length; i++) { 
     if ($(this).hasClass(classes[i])) { 
      for (var j = 0; j < classes.length; j++) { 
       if (classes[j] != classes[i]) { 
        $(parent).find('.' + classes[j]).addClass(classes[j] + '-bw'); 
       } 
      } 
      $(this).removeClass(classes[i] + '-bw'); 
      break; 
     } 
    }   
});​ 

или даже сокращенный вариант без вложенного цикла:

$('span').click(function(){ 
    var parent = $(this).parent(); 

    var classes = ['listed', 'special', 'unlisted']; 

    for (var i = 0; i < classes.length; i++) { 
     if ($(this).hasClass(classes[i])) { 
      $(parent).find(':not(.' + classes[i] + ')').each(function() { 
       $(this).addClass($(this).prop('class') + '-bw'); 
      }); 
      $(this).removeClass(classes[i] + '-bw'); 
      break; 
     } 
    }   
});​ 

Answer 3

Я соединил быстрые и простые немного JavaScript, который будет делать то, что вам нужно, я считаю,:

$(document).ready(function() { //When the DOM is ready 
    $('span').on('click', function() { 
     $this = $(this); 
     if (!$this.hasClass("disabled")) { 
      $this.siblings().addClass("disabled"); 
     } 
    }); 
});​ 

В основном я добавить класс отключенный к братьям и сестрам, которые затем могут быть стилизованы:

.disabled { 
    background:#ccc; 
    cursor:default; 
} 

в действии: http://jsfiddle.net/uBSX6/