Блог

Главная - Вопросы по программированию - Класс ‘active’ не отображается на изображении ‘li’. Он просто удаляется, но не переходит на следующее изображение

Класс ‘active’ не отображается на изображении ‘li’. Он просто удаляется, но не переходит на следующее изображение

#javascript #jquery

#javascript #jquery

Вопрос:

Вот исходный код для javascript и исходный код страницы. Любая помощь была бы очень признательна, поскольку я схожу с ума.

Класс ‘active’ не отображается на изображении ‘li’. Он просто удаляется, но не переходит на следующее изображение.

Ссылка на веб-сайт является https://doozydog.co.uk/dev/satelliet-uk/product/wrap-steel-lounge-armchair /

 "use strict";

jQuery(window).load(function () {

   

    //jCarousel Plugin
    jQuery('#tzShopDetail_carousel').jcarousel({
        vertical: true,
        scroll: 1,
        auto: 2,
        navigation: false,
        wrap: 'last',
        //itemLoadCallback: {
        //    onBeforeAnimation: function(){
        //        interiart_resize_image(jQuery('#tzShopDetail_slide ul li'));
        //    }
        //},
        initCallback: mycarousel_initCallback
    });

    jQuery("#tzShopDetailSlide-carousel ul li a").each(function(){
        interiart_resize_image(jQuery(this));
    });

    //Front page Carousel - Initial Setup

    jQuery('div#tzShopDetail_slide li:first').addClass('active');
    //jQuery('div#tzShopDetailSlide-carousel a img').css({'opacity': '0.5'});
    jQuery('div#tzShopDetailSlide-carousel ul li:first').addClass('bd_active');
//    jQuery('div#slideshow-carousel li a:first').append('<span class="arrow"></span>')

    //Combine jCarousel with Image Display
    jQuery('div#tzShopDetailSlide-carousel li a').on('click',function () {

            jQuery('span.arrow').remove();
//            jQuery(this).append('<span class="arrow"></span>');
            jQuery('div#tzShopDetailSlide-carousel ul li.bd_active').removeClass('bd_active');
            jQuery(this).parent().addClass('bd_active');
            jQuery('div#tzShopDetail_slide li').removeClass('active');
            jQuery('div#tzShopDetail_slide li.'   jQuery(this).attr('data-link')).addClass('active');

            return false;
        });

    interiart_resize_image(jQuery('#tzShopDetail_slide ul li '));
});

Ответ №1:

Проблема в том, что у вас есть имена классов с . в них

Итак, jQuery запутывается, потому что div#tzShopDetail_slide li.Wrap-Steel-Lounge-Armchair.jpg ищет элемент с class=Wrap-Steel-Lounge-Armchair jpg — обратите внимание на ПРОБЕЛ вместо .

Лично я бы избегал имен классов с помощью . or # или > — т. е. всего, что имеет определенное значение в селекторах CSS

Однако в вашем случае вы можете устранить проблему, экранировав . в селекторе

 jQuery('div#tzShopDetail_slide li.'   jQuery(this).attr('data-link').replace('.', '\.')).addClass('active');

Или, если в имени класса может быть БОЛЕЕ одного . 

 jQuery('div#tzShopDetail_slide li.'   jQuery(this).attr('data-link').replace(/./g, '\.')).addClass('active');

Комментарии:

1. Спасибо за эту информацию, я полностью упустил из виду, что это проблема. Работает отлично!