Question

我正在使用带有六个图像的过滤器的图库上工作，图库位于ul内，每个li元素都包含两个过滤器中的一个工作。这是结构：

<div id="productsGrid">
   <ul id="portfolio">
      <li class="men">
         <img src="images/grid-images/men/1.jpg" /><div class="caption">TEXT IMG 1</div>
      </li>
      <li class="woman">
         <img src="images/grid-images/woman/1.jpg" /><div class="caption">TEXT IMG 2</div>
      </li>
      <li class="men">
         <img src="images/grid-images/men/2.jpg" /><div class="caption">TEXT IMG 3</div>
      </li>
      <li class="woman">
         <img src="images/grid-images/woman/2.jpg" /><div class="caption">TEXT IMG 4</div>
      </li> 
      <li class="men">
         <img src="images/grid-images/men/3.jpg" /><div class="caption">TEXT IMG 5</div>
      </li>
      <li class="woman">
         <img src="images/grid-images/woman/3.jpg" /><div class="caption">TEXT IMG 6</div>
       </li>
   </ul>
</div>

我已经在网站文件中存储了两个不同文章之间共12张图片，出于效率原因和设计，我不希望将12张图片加载到结构中，这就是为什么我打电话给每个人的前三个。我尝试使用过滤器的click函数的脚本实现的是，每个类的三个图像的其余部分都是使用append()和appendChild()函数构建的。

  $('#filter li').click(function() {
        $('#filter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','-');
        var i = 4;
        if(filterVal == 'all') {
          $('#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
        }else {
          $('#portfolio li').each(function() {
            if(!$(this).hasClass(filterVal)) {
               $(this).remove();
               var linew = document.createElement("li");
               linew.className = filterVal;
               imgNew = document.createElement("img");
               imgNew.src = 'images/grid-images/'+filterVal+'/'+i+'.jpg'
               $('#portfolio').appendChild(linew);
               linew.appendChild(imgNew);
            } else {

            }
          });
        }
        return false;
      });

此代码运行且控制台未提供任何错误消息，但未显示使用document.createElement创建的元素。我希望每次单击其中一个过滤器按钮时，删除没有单击的类的三个图像，并显示该类的其他三个。过滤条只有三个选项，可以显示单击的类的六个图像。

<div id="topBar">
  <ul id="filter">
    <li class="current"><a href="#">All</a></li>
    <li><a href="#">Men</a></li>
    <li><a href="#">Woman</a></li>
  </ul>  
</div>

我不知道这段代码是否正确完成，还是有另一种方法可以让这更容易，但我还不是JS和jQuery的专家。我很感激你的帮助。

Answer 1

你可以这样做：

           var $linew = $("<li />");
           $linew.attr("class", filterVal);
           $imgNew = $("<img />");
           $imgNew.attr("src", 'images/grid-images/'+filterVal+'/'+i+'.jpg');
           $linew.append($imgNew);
           $('#portfolio').append($linew);

请注意，您可以将图像用作类.man和.woman的背景图像，这将简化您的js代码。

Answer 2

尝试jquery方式：

 if(!$(this).hasClass(filterVal)) {
    $(this).remove();
    var linew = '<li class="'+filterVal+'"><img src="images/grid-images/'+filterVal+'/'+i+'.jpg"/></li>'
    $('#portfolio').append(linew);
 } else {
 }

如何使append（）和appendChild（）成为我想要的元素？

2 个答案: