我该怎么循环呢？

Question

我正在尝试循环我所做的按钮的功能。我有三个视频收藏。他们都需要相同的脚本为下一个和上一个。

我想要的是我只需要做一个下一个按钮和一个prev按钮。这就是它应该做的事：

​

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

你能看看下面的方法吗？

$("[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 2

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-)按钮，然后从实际单击的按钮的id中计算出索引。

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

Answer 3

使用带有next(),prev(),find()的类获取基于下一个/prev元素的视频相册类或使用此黑客

$('[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);