Question

我有一个ul的列表，其中包含一组＆＃34;颜色框＆＃34;。这些li中的每一个都具有＆＃34; data-color＆＃34;的数据属性。这些数据属性也可以在对应于每个li的匹配图像中找到。我想要做的是当你悬停或点击具有匹配数据属性的li时，将每个li的每个图像换出。这是我目前的jquery。请记住，在jQuery方面我不知道我在做什么：

jQuery的（文件）。就绪（函数（）{ // foreach每个ul.color-boxes li

jQuery("ul.color-boxes li").each(function() {

                    // bind click event 
    jQuery(this).bind('click', function() {

        jQuery("li").attr("data-color");



    });   
});

jQuery("figure.main-image img").each(function() {

    jQuery("img").attr("data-color");

});

//ul.color-boxes li === figure.main-image img
    function showImg(strShow, strHide) 
        {
            // hide all figure.main-image img
            jQuery("figure.main-image img[data-color='"+ strShow +"']").show();

            document.getElementById(strShow).style.display = 'block';
            document.getElementById(strHide).style.display = 'none';
        }

}）;

任何人都有任何帮助他们可以发送我的方式吗？

Answer 1

我认为这是您搜索的解决方案：

jQuery(document).ready(function() {
    jQuery("ul.color-boxes li").on("click", function() {    // foreach each ul.color-boxes li
        var sColorVal = jQuery(this).attr("data-color");
        if (typeof(sColorVal) != "undefined") {
            jQuery("figure.main-image img[data-color='"+ sColorVal +"']").show();   // show images with clicked "data-color" value
            jQuery("figure.main-image img[data-color!='"+ sColorVal +"']").hide();  // hide images with deffrent "data-color" value
        }
    });
});

Answer 2

我已经修改了一些代码，并尝试在必要时添加注释，希望足够;）

 jQuery(document).ready(function(){

      var strShow="";
      var strHide="";

      function showImg() 
      {

         // if a image is already visible and if it is not the same image as the image that is to be made visible
         if(strHide.length>0 && strShow!=strHide){
               // hide previous figure.main-image img
               jQuery("figure.main-image img[data-color='"+ strHide+"']").hide();
          }

          jQuery("figure.main-image img[data-color='"+ strShow +"']").show();

          //Keeping track of the currently visible image to hide later if required

          strHide=strShow;
    }

    jQuery("ul.color-boxes li").each(function() {

                // bind click event 
               jQuery(this).bind('click', function() {

               //getting the data-color to associate with the current image to show
                strShow=jQuery(this).attr("data-color");

               //calling the function to show the current image
           showImg();


          });   
      });

    });

与li的jQuery图像交换

2 个答案: