Добавить и удалить несколько классов с помощью jQuery - PullRequest
Новая
       3

Добавить и удалить несколько классов с помощью jQuery

4 голосов
/ 29 декабря 2011 
 <div id="siteFeelingBannar" class="shadowVeryMild">
     <ul>
       <li><div class="autologinImage"></div><span class="statusHover">Affectionate</span></li>
       <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Annoyed</span></li>
       <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Anxious</span></li>
       <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Chatty</span></li>
       <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Content</span></li>
       <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Curious</span></li>
       <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Ecstatic</span></li>
       <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Excited</span></li>
       <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Free</span></li>
     </ul>
 </div>

У меня есть фрагмент кода, который дает раскрывающийся список, чтобы люди могли выбирать свое текущее чувство.

Вы заметите, что первый li немного отличается от остальных: 

  <li><div class="autologinImage"></div><span class="statusHover">Affectionate</span></li>

Это текущий выбранный li, так как он не имеет класса div.hidden (добавляет img - галочку для отображения выбранного) и не имеет класса span.autologinMargin (дает другой li Для некоторых элементов требуется интервал, чтобы они все были в очереди).

Я пытался написать jQuery, чтобы позволить этому переключаться. Например: если кто-то нажимает на другой li, то у него удаляются div.hidden и span.autologinMargin, а у ранее выбранного добавляются эти 2 класса.

Может ли кто-нибудь помочь мне подтолкнуть меня в правильном направлении с помощью этого кода.

Ответы [ 7 ]

3 голосов
/ 29 декабря 2011

Упростите его, добавив класс к li, а затем примените стиль с помощью дочерних селекторов.

Таким образом, все, что вам нужно сделать, это добавить / удалить класс из li, а не потомкаэлементы. 

var lis = $('#siteFeelingBannar li').click(function() {
    lis.not('.hidden').addClass('hidden');
    $(this).removeClass('hidden')
});

<div id="siteFeelingBannar" class="shadowVeryMild">
 <ul>
   <li><div class="autologinImage"></div><span class="statusHover">Affectionate</span></li>
   <li class="hidden"><div class="autologinImage"><span class="statusHover">Annoyed</span></li>
   <li class="hidden"><div class="autologinImage"><span class="statusHover">Anxious</span></li>
   <li class="hidden"><div class="autologinImage"><span class="statusHover">Chatty</span></li>
   <li class="hidden"><div class="autologinImage"><span class="statusHover">Content</span></li>
   <li class="hidden"><div class="autologinImage"><span class="statusHover">Curious</span></li>
   <li class="hidden"><div class="autologinImage"><span class="statusHover">Ecstatic</span></li>
   <li class="hidden"><div class="autologinImage"><span class="statusHover">Excited</span></li>
   <li class="hidden"><div class="autologinImage"><span class="statusHover">Free</span></li>
 </ul>
</div>

#siteFeelingBannar > ul > li { ... }
#siteFeelingBannar > ul > li > div.autologinImage { ... }
#siteFeelingBannar > ul > li > div.autologinImage > span.statusHover { ... }

#siteFeelingBannar > ul > li.hidden { ... }
#siteFeelingBannar > ul > li.hidden > div.autologinImage { ... }
#siteFeelingBannar > ul > li.hidden > div.autologinImage > span.statusHover { ... }
1 голос
/ 29 декабря 2011

В предыдущих ответах не замечалось, что классы находятся на вложенном <div>, а не <li>. 

$("#siteFeelingBannar li").click(function() {
    $(this).find("div").removeClass("hidden").end().find("span").removeClass("autologinMargin");
    $(this).siblings().find("div")addClass("hidden").end().find("span").addClass("autologinMargin");
});
1 голос
/ 29 декабря 2011

Вы можете использовать такой код, который добавляет класс ко всем элементам .autologinImage, а затем удаляет его из элемента click: 

$("#siteFeelingBannar .autologinImage").click(function() {
    $(this).closest("ul").find(".autologinImage").addClass("hidden");
    $(this).removeClass("hidden");
});

Вы можете увидеть, как это работает здесь: http://jsfiddle.net/jfriend00/ECrHP/

Вам также придется исправить <div> нестабильность вложенности в вашем первом <li> в вашем HTML. <span> должен быть внутри <div>, а не после него, как все остальные.

Нет необходимости динамически добавлять / удалять класс autologinMargin, так как вы можете управлять этим только с помощью CSS в зависимости от того, скрыт родитель или нет. На самом деле, вам, вероятно, даже не нужен этот класс. Просто установите правило по умолчанию и переопределите его, если .hidden находится над ним.

Если вы хотите переместить классы, которые сейчас находятся в div, на li и соответствующим образом настроить CSS, тогда код может быть еще проще: 

$("#siteFeelingBannar li").click(function() {
    $(this).removeClass("hidden").siblings().addClass("hidden");
});
0 голосов
/ 29 декабря 2011

Вот рабочий пример . 

$('#siteFeelingBannar li').on('click', function() {
    if (!$(this).children('.autologinImage').hasClass('hidden')) {
        // Do nothing
    } else {
        $('.autologinImage').not('hidden').addClass('hidden');
        $(this).find('div.autologinImage').removeClass('hidden');
    }
});
0 голосов
/ 29 декабря 2011

Это должно работать. 

$('#siteFeelingBannar li').click(function(){
    // Add the class to div and spans
    $(this).siblings().find('div').addClass('hidden');
    $(this).siblings().find('span').addClass('autologinMargin');

    // Remove the classes from div and span.
    $(this).find('div').removeClass('hidden');
    $(this).find('span').removeClass('autologinMargin');
});
0 голосов
/ 29 декабря 2011

Вы можете добавить класс к выбранному li, скажем, selected.Затем вы можете использовать это, чтобы найти выделенный li и добавить соответствующие классы к его дочерним элементам.

Что-то вроде этого: 

$(".selected").find("autologinImage").addClass("hidden").end()
              .find("statusHover").addClass("autologinMargin").end()
              .removeClass("selected");

Я бы рассмотрел вместо этого определение вашего css, чтобы выне нужно удалять и добавлять эти классы.Примерно так: 

.autologinMargin{
    visibility: hidden;
}

.selected .autologinMargin{
    visibility: visible;
}

Кроме того, использование visibility позволит вам сохранить поле стабильным, поскольку изображение все равно будет занимать место.

0 голосов
/ 29 декабря 2011

Вы можете просто попробовать свойство класса switch, встроенное в jquery. 

$('.classname').hover( function(){
    $(this).stop(false, true).switchClass("classname");
}, function(){
    $(this).stop(false, true).switchClass("2ndclassname);
});

Это пример.

...