我该如何循环呢？

Question

我正在尝试为我制作的按钮循环功能。 我有3个视频集。 他们都需要下一个和前一个相同的脚本。

我想要的是我只需要制作一个下一个按钮和一个前一个按钮。 这是它应该做的：

  $("#next-1").click(function(){ var $this = $(".video-album-1"); callback = function() { $this.insertBefore($this.siblings(':eq(2)')); } $this.fadeOut(200, callback).fadeIn(400); }); $("#prev-1").click(function(){ var $this = $(".video-album-1"); callback = function() { $this.insertAfter($this.siblings(':eq(3)')); } $this.fadeOut(200, callback).fadeIn(400); }); $("#next-2").click(function(){ var $this = $(".video-album-2"); callback = function() { $this.insertBefore($this.siblings(':eq(2)')); } $this.fadeOut(200, callback).fadeIn(400); }); $("#prev-2").click(function(){ var $this = $(".video-album-2"); callback = function() { $this.insertAfter($this.siblings(':eq(3)')); } $this.fadeOut(200, callback).fadeIn(400); }); 

我已经尝试循环它，但这不起作用：

 for (i = 0; i < 3; i++) { $("#next-"+i).click(function(){ var $this = $(".video-album-"+i); callback = function() { $this.insertBefore($this.siblings(':eq(2)')); } $this.fadeOut(200, callback).fadeIn(400); }); $("#prev-"+i).click(function(){ var $this = $(".video-album-"+i); callback = function() { $this.insertAfter($this.siblings(':eq(3)')); } $this.fadeOut(200, callback).fadeIn(400); }); } 

有没有人可以告诉我一个解决方案？ 我不想反复创建＃next-3＃next-4 ids等。

提前致谢。

Answer 1

这个问题及其答案解释了为什么你的尝试无法正常工作。

基于您尝试for循环，这将工作：

$("[id^=next-]").click(function() {
    var i = this.id.substring(5);
    var album = $(".video-album-" + i);
    callback = function() {
        album.insertBefore(album.siblings(':eq(2)'));
    };
    album.fadeOut(200, callback).fadeIn(400);
});
$("[id^=prev-]").click(function() {
    var i = this.id.substring(5);
    var album = $(".video-album-" + i);
    callback = function() {
        album.insertAfter(album.siblings(':eq(3)'));
    };
    album.fadeOut(200, callback).fadeIn(400);
});

这可以通过使用属性以选择器开头来匹配所有next- （和prev- ）按钮，然后从实际点击的按钮的id中找出索引。

但是如果引用HTML，我们可能会给你一个更好的答案。

Answer 2

你能看看下面的方法：

$("[id^=next-]").click(function(){
    var current_id = $(this).attr("id");
    var number = current_id.replace("next-","");

    var $this = $(".video-album-"+number);
    callback = function() {
        $this.insertBefore($this.siblings(':eq(2)'));
    }
    $this.fadeOut(200, callback).fadeIn(400);
});

$("[id^=prev-]").click(function(){
    var current_id = $(this).attr("id");
    var number = current_id.replace("prev-","");

    var $this = $(".video-album-"+number);
    callback = function() {
        $this.insertAfter($this.siblings(':eq(3)'));
    }
    $this.fadeOut(200, callback).fadeIn(400);
});

这里我们使用jQuery的启动选择器将事件附加到所需的DOM元素，并在事件处理程序中我们抓取相关的数字以便进一步处理。

Answer 3

使用带有next(),prev(),find()来获取基于next / prev元素的视频专辑类或使用此hack

$('[id^="next-"]').click(function(){
        var i = $(this).attr('id').split('-')[1];
        var $this = $(".video-album-"+i);
        callback = function() {
            $this.insertBefore($this.siblings(':eq(2)'));
        }
        $this.fadeOut(200, callback).fadeIn(400);
    });

    $('[id^="prev-"]').click(function(){
         var i = $(this).attr('id').split('-')[1];
         var $this = $(".video-album-"+i);
        callback = function() {
            $this.insertAfter($this.siblings(':eq(3)'));
        }
        $this.fadeOut(200, callback).fadeIn(400);

Answer 4

我现在强调，这只是一种方式，可能有更好的方法

假设这些是你的按钮

<button class="next" data-videocollectionname="video1">next</button>
<button class="next" data-videocollectionname="video2">next</button>
<button class="next" data-videocollectionname="video3">next</button>

<button class="previous" data-videocollectionname="video1">previous</button>
<button class="previous" data-videocollectionname="video2">previous</button>
<button class="previous" data-videocollectionname="video3">previous</button>

我已经给每个按钮一个数据属性来说明该按钮与哪个集合相关。

如果我错过了，请原谅我理解这个问题

$(".next").click(function(){
    var videoCollectionName = $(this).data("videocollectionname");
  var videoElement = $("#"+videoCollectionName);

//do whatever code you want for the videocollection

});

$(".previous").click(function(){
    var videoCollectionName = $(this).data("videocollectionname");
  var videoElement = $("#"+videoCollectionName);

//do whatever code you want for the videocollection

});