Добавление и удаление классов из других разделов после использования jQuery fadeIn() в слайд-шоу

Question

Я сделал слайд-шоу с использованием jQuery. Он использует методы fadeIn и fadeOut. Это прекрасно работает.

Что мне нужно, это добавить класс css в другой div, в зависимости от того, какой слайд показан. Я добавил некоторый сокращенный код JSfiddle, чтобы вы могли лучше понять, что я имею в виду.

http://jsfiddle.net/dRqKM/

Я хочу розовые коробки, чтобы подсвечиваться, когда соответствующий слайд.

Добавление следующее, кажется, не работает:

if ($("#firstSlide").css("display") == "block") { 
    $("#div1").addClass("Highlight"); 
    $("#div2").removeClass("Highlight"); 
    $("#div3").removeClass("Highlight"); 
} 

Answer 1

три основные проблемы:

1. Специфика .Highlight такой же, как .button и потому .Highlight приходит первым в определении CSS, то Б.Г. цвет от .button выигрывает, и держать его розовый цвет. Дайте ему более высокую специфичность или более высокую значимость (например,div.Highlight или .button.Highlight или используйте !important)
2. Ваш код не принимает во внимание поворот - когда вы нажимаете кнопку next/prev. Поэтому, независимо от того, что станет зеленым, он останется зеленым, потому что вы его не вращаете.
3. Ваш код, который проверяет (if/else if/else if block), был неправильным. if выглядел нормально, но два других блока были неправильными. Я собираюсь предположить, что это была просто демо-версия. Но я исправил это в моем примере.

http://jsfiddle.net/dRqKM/1/ Посмотрите эту скрипку для рабочей версии. Обратите внимание, что если вы хотите, чтобы окно включалось в поле до конца исчезновение затухания, просто переместите вызов на changeActiveChild как после вызов fadeIn вместо функции обратного вызова, например. http://jsfiddle.net/dRqKM/6/

Answer 2

Удалите класс из всех кнопок, а затем добавить его обратно в соответствующий один:

$('.buttons').removeClass('Highlight'); 
targetButton.addClass('Highlight'); 

Кроме того, ваш Highlight класс не был достаточно конкретным, чтобы переопределить класс button. Еще одно замечание: используйте осторожность, если вы планировали background-color: green;, а не background. Свойство CSS background используется как ярлык, и синтаксис отличается. Если вы указали только цвет, предпочтительным является прежний метод.

Вот рабочая версия:

$(document).ready(function() { 
    $('.slideshow').find('> li:eq(0)').nex\All().css({ 'opacity': '0', 'display': 'none' }); 
    $('.controls > a').click(function (event) { 
     event.preventDefault(); 
     var currentslide = $(this).parents('li:first'); 

     var currentposition = $('.slideshow li').index(currentslide); 
     var nextposition = ($(this).attr('class') == 'next') ? currentposition + 1 : currentposition - 1; 

     $('.buttons').removeClass('Highlight'); 
     $('#div'+(nextposition+1)).addClass('Highlight') 

     $('.slideshow li:eq(' + currentposition + ')').hide() 
     $('.slideshow li:eq(' + nextposition + ')').fadeIn(2000); 
    }); 
}); 

JSFiddle: http://jsfiddle.net/dRqKM/8/

Документация

• jQuery.addClass - http://api.jquery.com/addClass/
• jQuery.removeClass - http://api.jquery.com/removeClass/
• JQuery селекторы - http://api.jquery.com/category/selectors/
• CSS background на MDN - https://developer.mozilla.org/en-US/docs/CSS/background
• CSS background-color на MDN - https://developer.mozilla.org/en-US/docs/CSS/background-color

Answer 3

Те, если заявления вы должны будете работать только один раз, на странице готов, в то время как вы будете хочу, чтобы они стреляли по щелчку. Также класс Highlight не имеет достаточно высокой специфичности для переопределения стиля фона в классе .button. Рассмотрим это в таблице стилей:

div.Highlight { background:green; } 

добавления узла в правиле стиля будет переопределять фон на кнопку класса.

Answer 4

Здесь вы мате: http://jsfiddle.net/zFnfC/

две линии на JS и 1 на CSS

$("div.buttons").removeClass('Highlight'); 
$("#div" + (nextposition + 1)).addClass('Highlight'); 

и CSS:

.Highlight { background: green !important; } 

Answer 5

Были некоторые логические вопросы, которые я фиксированной здесь:

http://jsfiddle.net/dRqKM/7/

Самая большая проблема, кроме того, что класс .Highlight был объявлен перед классом button, поэтому добавление обоих из них, класс button по-прежнему имеет приоритет. Поэтому, даже когда логика была права, она не работала должным образом. Я переместил класс .Highlight под классом button и исправил некоторую логику. Теперь тебе все хорошо.