Question

我有前五个元素后应显示或隐藏的元素。当我点击标识为#loadMore的“加载更多...”时，它将触发显示所有元素并将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

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

我解释了你的错误：

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

希望它的帮助！：）

Answer 2

您正在更改div上的div的ID，因此应使用$（document）并将所有ID绑定到

ofArrayChanges

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

Answer 3

我创建了一个div类名“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
});

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

3 个答案: