javascript - jquery nth-child 作为函数中的参数。

Question

我有四个段落元素。单击奇数元素后，我想切换下一个偶数元素。

这是安排。

<p>First</p>

<p>Second</p>

<p>Third</p>

<p>Fourth</p>

所以，如果我点击 First，我希望 Second 被切换；如果我点击第三个，我想切换第四个元素。我希望这是有道理的。

这是我到目前为止所能想到的。

$("p:odd").click(function(){
    $("p:even").toggle("slow");
        });

现在，这段代码切换了所有偶数元素。每当我单击一个奇数段落时，我只想切换 n+1。是否有意义？有没有办法让该函数接受一个参数，以便在单击一个奇数段落后，切换下一个 (n+1) ？我不确定如何传递论点或最好的方法是什么。

谢谢

Answer 1

你试试怎么样.next()？ http://api.jquery.com/next/

$("p:odd").click(function(){
    $(this).next().toggle('slow'); 
        });

Answer 2

您可以缓存对象和使用eq方法：

var $p    = $('p'), 
    $odd  = $p.filter(':odd'), 
    $even = $p.filter(':even');

$odd.click(function(){
    $even.eq( $odd.index(this) ).toggle('slow');
});

http://jsfiddle.net/TLucC/ | http://jsfiddle.net/uNu9y/

Answer 3

在所有 Javascript 和 jQuery 方法中，触发事件的项会自动传递给函数，格式为this. 但是，由于变量范围没有包含在 Javascript 中，this可能会根据内部调用的其他函数而改变。最佳做法是this立即设置为另一个变量。

因此，您可以像这样调整方法：

$("p:odd").click(function(){
    var self = this;

    // I'm doing .next('p') to make your code safer in case there's something between the <p> elements.
    $(self).next('p').toggle('slow');
});