Question

我想显示3个<li>元素并隐藏其余元素。完成此操作后，我会点击“显示更多”。当我单击“显示更多”时，它将显示其余的内容。现在，我希望看到更少的<li>元素。当我单击“显示较少”时，该按钮不起作用。

 <ul class="what-ul">
   <li>Lorem ipsum</li>
   <li>Lorem ipsum</li>
   <li>Lorem ipsum</li>
   <li>Lorem ipsum</li>
   <li>Lorem ipsum</li>
   <li>Lorem ipsum</li>
   <li>Lorem ipsum</li>
   <li>Lorem ipsum</li>
   <li>Lorem ipsum</li>
   <li>Lorem ipsum</li>  
</ul>
<script>
  $(document).ready(function(){
    var count = $('.what-ul').children().length;

    if(count > 3){
      $('.what-ul li:gt(3)').hide()
      $('.what-ul').append("<div class='btn-show'><a class='show-button-6'>... Show more</a></div>");
    } else {
      $('.what-ul li:gt(3)').show();
    }

    $('.show-button-6').click(function() {
      $('.what-ul li:gt(3)').show();
      $('.what-ul').append("<div class='btn-show'><a class='show-button-less-6'>Show less</a></div>");
      $('.show-button-6').hide();
    });

    $('.show-button-less-6').click(function() {
      $('.what-ul li:gt(3)').hide();
      $('.what-ul').append("<div class='btn-show'><a class='show-button-6'>... Show more</a></div>");
      $('.show-button-less-6').hide();
    });
  });
</script>

Answer 1

代码中的问题是，您试图将事件侦听器附加到DOM上尚不存在的元素。

您要附加到document.ready上，但是当触发document.ready时，您还没有创建显示少/显示多的元素并将它们附加到DOM，这意味着侦听器没有任何附加条件

您有2种可能的解决方案：

将您的侦听器附加到主体，但让其侦听按钮元素的单击，如下所示：
```
$('body').on('click', '.show-button-6', function() {
    // Listener code here
});
```
在HTML（而不是jQuery）中创建按钮并将其隐藏，然后只需切换其可见性即可。让它们隐藏/显示而不是添加新按钮也是更好的性能。

奖金请注意，您要添加新按钮，但不破坏先前的按钮，而只是隐藏它们。这意味着您在DOM上有大量重复的按钮。如果您不采用我的第二个解决方案，请至少将代码更改为此：

 $(document).ready(function(){
  var count = $('.what-ul').children().length;

  if(count > 3){
   $('.what-ul li:gt(3)').hide()
   $('.what-ul').append("<div class='btn-show'><a class='show-button-6'>... Show more</a></div>");
   }
  else{
    $('.what-ul li:gt(3)').show();
    }

  $('body').on('click', '.show-button-6', function() {
  $('.what-ul li:gt(3)').show();
  $('.what-ul').append("<div class='btn-show'><a class='show-button-less-6'>Show less</a></div>");
  $('.show-button-6').remove();
});

  $('body').on('click', '.show-button-less-6', function() {
   $('.what-ul li:gt(3)').hide();
   $('.what-ul').append("<div class='btn-show'><a class='show-button-6'>... Show more</a></div>");
   $('.show-button-less-6').remove();
 });
});

当添加其他版本（更多/更少）时，将确保上一个按钮被销毁。

编辑：JSfiddle

为什么“显示较少”在我的代码中不起作用？

1 个答案: