Question

我用div做了这个。我这样称呼

<div id="foo"></div>
<div id="foo2"></div>
<div id="foo3"></div>
<div id="foo4"></div>
<a class="bar">go to random div</a>

然后使用jquery我转到一个随机div id。

$(document).ready(function() {
    // Create an array of links
    $("a.bar")
    foo = new Array;
    foo[0] = "#foo";
    foo[1] = "#foo2";
    foo[2] = "#foo3";
    foo[3] = "#foo4";

$("a.bar").click(function() {
        randomLink = Math.round(Math.random() * (foo.length - 1));
        $("html, body").animate({
            scrollTop: $(foo[randomLink]).offset().top + "px"
        }, {
            duration: 7000,
            easing: "easeInOutExpo"
        });
        return false;
    });
});

我现在想要做同等的但是有一个班级。因此，示例HTML代码将是：

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<a class="bar">go to random class</a>

如果考虑到<div class="foo"></div>有不同的数量，我将如何处理这种情况的等效jquery？

问题。

我不知道如何为每个类（而不是每个div）创建等效数组...因为它们是相同的......

有什么想法吗？

Answer 1

您可以使用.eq()函数

执行此操作

var foo = $('.foo');  //Grab all the elements with the class foo

$("a.bar").click(function() {
        randomLink = Math.round(Math.random() * (foo.length - 1));
        $("html, body").animate({
            scrollTop: foo.eq(randomLink).offset().top + "px"  
               //pass the random no to .eq() called over .foo collection
        }, {
            duration: 7000,
            easing: "easeInOutExpo"
        });
        return false;
    });
});

Answer 2

试试这个......

$("a.bar").click(function() {

        randomLink = Math.round(Math.random() * (foo.length - 1));
        $("html, body").animate({
            scrollTop: $('.foo:eq('+ randomLink +')').offset().top + "px"  
        }, {
            duration: 7000,
            easing: "easeInOutExpo"
        });
        return false;
    });
});

滚动到名为＆＃34; foo＆＃34;的随机类

问题。

2 个答案: