Question

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

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

＆＃13;

    $("#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);
	});

＆＃13;

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

＆＃13;

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);
	});
}

＆＃13;

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

提前致谢。

Answer 1

This question及其答案解释了为什么您的尝试无效。

根据您尝试的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-）按钮，然后从{{1}中找出索引实际点击了按钮。

但如果引用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

});

我该如何循环呢？

4 个答案: