Question

我真的很抱歉问这么愚蠢的问题，但为什么我的代码没有工作？它已经让我疯了，这是一个简单的代码，但由于某种原因它不起作用？也许我错过了一些东西，新的双眼可能会帮助我。假设淡出一切然后只用一类“凯特戈里亚”来淡化元素。它确实淡出了它想要做的所有事情，但是当我点击“元素”下的一个元素时，什么都没有消失。格。

console.log在控制台中显示kategooria，所以这意味着div有该类，但由于某种原因它不会淡入。我也尝试在淡出后添加淡入淡出命令，使用一些随机类，但是它也不会起作用。

JQUERY

jQuery(function(){
jQuery('.element ul li').click(function(){
    var kategooria = jQuery(this).html();
    jQuery('.elemendid').fadeOut();
    jQuery('.elemendid > div').each(function(){
        if(jQuery(this).hasClass(kategooria)){
            console.log(kategooria);
            jQuery(this).fadeIn();
        }
    });
});
});

HTML

<div class="col-md-12 element">
    <ul><li>moodulmajad</li>
        <li>ELEMENTMAJAD</li>
        <li>FERMID</li>
   </ul>
</div>
<div class="elemendid">
   <div class="moodulmajad">
      <h2>MOODULMAJAD</h2>
         [gallery ids="104,105,106,107,108,109,110,111,112,113,114,115,116,117,118"]
  </div>
<div class="ELEMENTMAJAD">
    <h2>ELEMENTMAJAD</h2>
        [gallery ids="880,878,884,882,832,829"]
</div>
<div class="FERMID">
   <h2>FERMID</h2>
        [gallery ids="104,105,106,107,108,109,110,111,112,113,114,115,116,117,118"]
   </div>
</div>

Answer 1

使用以下代码

jQuery(function(){
                    jQuery('.element ul li').click(function(){

            var kategooria = jQuery(this).text();



            jQuery('.elemendid > div').each(function(){

                if(jQuery(this).hasClass(kategooria)){
                    console.log(kategooria);
                    jQuery(this).fadeIn();
                }else{
                    jQuery(this).fadeOut();

                }
            });
        });
    });

Answer 2

fadeOut（）和fadeIn（）是异步的。在你的代码中，你fadeOut（）父，然后fadeIn（）一个孩子。这不会奏效。即使行为很奇怪，下面的代码应该按照您的预期执行：

jQuery(function(){
jQuery('.element ul li').click(function(){
    var kategooria = jQuery(this).html();
    jQuery('.elemendid > div.'+kategooria).stop().fadeIn();
    jQuery('.elemendid > div').not('.'+kategooria).stop().fadeOut();
});
});

Answer 3

尝试将您的HTML和JavaScript更改为：

$(function(){
  $('.element ul li').click(function(){
      var kategooria = $(this).text();
      $('.elemendid > div:visible').fadeOut(function() {
        $('.elemendid > div.' + kategooria).fadeIn();
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 element">
    <ul><li>moodulmajad</li>
        <li>ELEMENTMAJAD</li>
        <li>FERMID</li>
   </ul>
</div>
<div class="elemendid">
   <div class="moodulmajad">
      <h2>MOODULMAJAD</h2>
         [gallery ids="104,105,106,107,108,109,110,111,112,113,114,115,116,117,118"]
  </div>
  <div class="ELEMENTMAJAD">
    <h2>ELEMENTMAJAD</h2>
        [gallery ids="880,878,884,882,832,829"]
  </div>
  <div class="FERMID">
    <h2>FERMID</h2>
        [gallery ids="104,105,106,107,108,109,110,111,112,113,114,115,116,117,118"]
  </div>
</div>

为什么我的JQUERY代码不起作用？

3 个答案: