Question

我正在尝试在浏览器（https://direct.asda.com/george/women/dresses/ochre-ruched-front-floral-print-midi-dress/GEM652507,default,pd.html）的控制台中创建页面的变体。我遇到的问题是，当我单击缩略图时，主图像没有更改。当我单击缩略图，滑块箭头，分页时，主滑块应会更新。反之亦然。单击箭头或分页时已选择缩略图显示。我只希望我的代码在浏览器控制台上工作。

下面是我的代码：

$(function(){

$(".inspirational-right").hide();           
    d = document.createElement('div');
    $(d).addClass("thumbnail")
    .insertAfter($(".product-name" ));
$( ".swiper-slide.image-slide" ).clone().appendTo( ".thumbnail" );
$(".inspirational-left").css({"width": "100%","float": "right", "position": "relative"});
$(".thumbnail").css({"position":"absolute","z-index":"999","width": "140px", "height": "600px", "float": "left", "top": "1px","overflow": "hidden"});
$(".thumbnail > .swiper-slide.image-slide").css({"z-index":"999","transform": "scale(.18,0.18)","height": "112px", "width": "71px","cursor":"pointer"});
$(".swiper-container.custom").css({"margin-left":"200px"});
$(".thumbnail > .swiper-slide.image-slide").click(function(){
  $(".thumbnail > .swiper-slide.image-slide").removeClass("active");
  $(this).addClass("active");
  var imgId=$(this).attr("data-imageid");     
  $( ".swiper-container .swiper-wrapper .swiper-slide.image-slide" ).each(function() {
    $(".swiper-container .swiper-wrapper .swiper-slide.image-slide").removeClass("swiper-slide-active");  
    $(".swiper-container .swiper-wrapper .swiper-slide.image-slide").removeClass("swiper-slide-visible");      
    if($(this).attr("data-imageid")===imgId){
      $(this).addClass("swiper-slide-active");
    }        
  });      
})
 });

已更新修正和建议

jQuery添加类，但DOM不更新

0 个答案: