如何使用一个按钮 show/hide 一定数量的 div？

Question

我有一些元素应该在前五个元素之后显示或隐藏。当我单击 ID 为 #loadMore 的 'Load More...' 时，它会触发显示所有元素并将 div id 更改为 #showLess 以执行一组不同的操作。因此，当我单击 #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

您正在更改点击时 div 的 ID，因此应该使用 $(document) 并将所有 ID 绑定到

$(document).on('click', '#loadMore', function()

https://jsfiddle.net/sbz51wdz/35/

Answer 2

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

我解释你的错误：

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

希望对您有所帮助！ :)

Answer 3

我创建了一个div class name "test" 并将loadMore div 放入其中进行绑定。您需要它导致隐藏或不可见的 div 需要在 jquery 中的每个事件发生时绑定。然后我以下面的方式修改了 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();
}

$('.test').on('click', '#loadMore', 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
});

$('.test').on('click', '#showLess', function()
{

    // slice the first five, hide the rest
    var j = 6;
    $('.section.thumbnail .thumb .video-thumbnail').each(function(i)
    {
      $('.section.thumbnail .thumb .video-thumbnail').eq(j).hide();
      j++;
    });
    $(this).attr('id', 'loadMore'); // change id to show less
    $(this).text('Load More...'); // change text value
});

如何使用一个按钮 show/hide 一定数量的 div？

How to show/hide certain number of divs using a single button?

javascript

each

jquery