javascript - 如何使用单个按钮显示/隐藏一定数量的 div？

Question

我有一些元素应该在前五个元素之后显示或隐藏。当我点击 id #loadMore 的“加载更多...”时，它将触发显示所有元素并将 div id 更改为 #showLess 以执行不同的 Action 组。因此，当我单击 #showLess 隐藏其余缩略图时，什么也没有发生。 $('#showLess').click(function() 未执行，而是再次执行 $('#loadMore').click(function() .

这是一个jsfiddle .

jQuery:

var vidThumbnail = "";
var elements = $('.section.thumbnail .thumb > .video-thumbnail');

for (i = 0; i < 25; i++) // loop thru 25 thumbnails
{
    vidThumbnail = '<div class="video-thumbnail">child ' + i + '</div>';
    $('.section.thumbnail .thumb').append(vidThumbnail);
    if(i > 5) // when it reaches the first five thumbnails, hide the rest
     $('.section.thumbnail .thumb .video-thumbnail').eq(i).hide();
}

$('#loadMore').click(function() // show them all
{
    $('.section.thumbnail .thumb .video-thumbnail').show();
    $(this).attr('id', 'showLess'); // change id to show less
    $(this).text('Show Less...'); // change text value
});

$('#showLess').click(function()
{
    // slice the first five, hide the rest
    $(elements).slice(5).each(function(i)
    {
      $('.section.thumbnail .thumb .video-thumbnail').eq(i).hide();
    });
    $(this).attr('id', 'loadMore'); // change id to show less
    $(this).text('Load More...'); // change text value
});

Answer 1

我修正了一些你的代码，因为你犯了一些错误。 看这里:https://jsfiddle.net/sbz51wdz/36/

我解释一下你的错误:

• 当您定义单击操作时，jQuery 会在匹配的 DOM 元素上添加一个事件。如果您只是更改 id 属性并在更改 ID 的操作开始之前附加该新 ID 的另一个事件，则 jQuery 将找不到任何具有新 ID 的内容。我最喜欢的解决方案是在具有固定类或 ID 的单个元素上添加单击事件。在函数内部，每次都会检查元素是否具有类，然后执行正确的操作。只需使用类似 $(this).hasClass(...)
的东西
• 在此之后，最好定义需要时调用的单个函数。
• 最后但并非最不重要的一点是，在 DOM 中定义上下文之后附加赋值非常重要。所以 var elements = $('.section.thumbnail .thumb > .video-thumbnail'); 这必须在生成元素的 foreach 循环之后写入。

希望有帮助! :)