Question

这更像是一个问题，你将如何做到这一点，而不是一个特定的问题。

假设我有5个div，分别叫div1，div2，div3，div4，div5。什么是制作循环函数的最快/最好的方法，例如下面的循环函数将循环某个div（不是页面上的所有div），如果点击它。

这是我能想到解释它的最佳方式。

单击Div1。调用一个函数，检查div1是否应该循环的div。然后启动循环功能。单击Div6，但未列为可以循环且不运行该功能的div。

function div1loop() {
        $("#div1").fadeTo("slow", 0.5, function ()    {
            $("#div1").fadeTo("slow", 0.1, div1loop);  
        });
}

你有什么方法可以建议“＃div1”可以成为一个变量，这样我就不必为5个独立的div编写5个不同的函数了吗？

有关背景信息 - 我最终会有50多个div用来做这个，而且你可以想象，如果我能做一个可以做到这一点而不是50的功能，那将节省我很多时间。

谢谢！

Answer 1

你可以这样做：

function divloop(selector) {
   $(selector).fadeTo("slow", 0.5, function ()    {
       $(selector).fadeTo("slow", 0.1, function() { divloop(selector); });  
   });
}

然后：

divloop("#div1");

编辑：你有两个选择：

在数组中允许存储选择器：

var allowedDivs = ["#div1", "#div2", "#div3" ];

并在divloop中：

function divloop(selector) {
    if(!$.inArray(selector, allowedDivs ) {
        return false;
    }
    $(selector).fadeTo("slow", 0.5, function ()    {
       $(selector).fadeTo("slow", 0.1, function() { divloop(selector); });  
    });
}

或者在div中添加一个可以在函数中检查的类

<div id="div1" class="canLoop"></div>

然后在你的函数中：

function divloop(selector) {
    if(!$(selector).hasClass("canLoop")) {
        return false;
    }
    $(selector).fadeTo("slow", 0.5, function ()    {
       $(selector).fadeTo("slow", 0.1, function() { divloop(selector); });  
    });
}

Answer 2

将一个类分配给你所指的div--类似.flagged，并在使用$（'。flagged'）。toggleClass（）处理该div的工作后添加/删除它。

$('.flagged').fadeOut(function(){
    $(this).removeClass('flagged');
})

如果您需要单独处理每个div（而不是同时处理所有div），请执行

$('.flagged').each(function(i, item){

    $(item).fadeOut(function(){
        $(this).removeClass('flagged');
    })

})

Answer 3

使用jQuery Selectors可以帮到你。例如，要引用任何id为“div＃”形式的div，可以使用

$('[id^=div]')

转换为“以div开头的任何id”或更常见的

$('[id*=div]')

转换为“任何包含div的id”。

这应该让你指出正确的方向。

jQuery执行此操作的最佳方法是循环函数

3 个答案: