Question

我已经坚持了很长时间了，我正在寻找一些指导...... 我想把以下内容变成更有活力的东西。我希望'selector'能够根据点击的元素进行更改。

所以这就是我认为需要做的事情：

找出点击了哪个元素。（h1，p，ol）
将该元素放在变量中，将类似的函数应用于我在下面创建的函数。

否则，我必须为每个元素实例指定相同的函数。（h1，h2，h3，p，ul，ol）

到目前为止，这就是我所拥有的:(有效，但显然仅适用于我的h1元素）

$("#content_body h1").click(function() {    
        $(this).hide(); //hide current element.
        $(this).next().show(); //display next element.

        var numofEl = $("#content_body h1").length;

        if ($(this).next().index() == numofEl) { //if we're at last element,
        $("h1:first-child").show(); //restart cycle.
        }
});

任何帮助总是非常感谢..提前致谢！

*的更新 **

另一种表达方式/描述我想要的内容：

假设容器中有许多不同的元素。（例如＆gt; #content_body）

对于每种不同的元素类型（h1，h2，p） - 一次只显示一个。（默认情况下，每个el的第一个开始。）
当您单击该元素时，它会循环显示相同的元素兄弟。（h1将隐藏当前的h1，并显示下一个h1，当它到达end / last h1时，它会重新开始循环）

Answer 1

如果要将选择器应用于多个不同的DOM元素，可以用逗号分隔选择器：

$('h1,p,ol').click(function(){ })

Answer 2

查看jquery multiple selectors

你可以通过几种方式来实现，比如

$("h1,p,ol,div").bind("click",function(){

//write the generic code here
});

也（由8vius建议）

$('h1,p,ol,div').click(function(){ 
//write the generic code here
})

在处理程序中，您可以$(this)或this

访问点击的元素

这里是小提琴http://jsfiddle.net/6gCRF/

Answer 3

你可以让这个函数像这样动态：

showHide('h1');
showHide('p');
showHide('ol');

function showHide(element){

    $(element).click(function() {    
            $(element).hide(); //hide current element.
            $(element).next().show(); //display next element.

            var numofEl = $(element).length;

            if ($(element).next().index() == numofEl) { //if we're at last element,
            $(element).eq(0).show(); //restart cycle.
            }
    });
}

Answer 4

这就是你想要的吗？

var length = $("#content_body").children().length;
$("#content_body").children().each(function(index){

$(this).click(function() {    
$(this).hide(); //hide current element.
$(this).next().show(); //display next element.


if (length-1 == index) { //if we're at last element,
$("h1:first-child").show(); //restart cycle.
}
});
 });

jQuery +一个返回被点击元素的函数

4 个答案: