javascript - 如何对具有相同类的不同 div 使用相同的 JQuery 效果

Question

我不太喜欢使用 javascript 和 jQuery，所以请添加详细的答案。

我需要为不同的 div 添加 jQuery 效果s 具有相同的类，因此当我单击 div 1 时与类 item , 另一个 div info将出现在特定的容器中。
另外，如果我点击 div 2同级item , 另一个 div pics将出现在与 info 相同的容器中同时 info会消失。

我打算用这个:

$(document).ready(function(){
    $("#box1").click(function(){
        $("#box1").fadeOut(250);
    });
    $("#box1").click(function(){
        $("#box2").fadeIn(500);
    });
});

但这对于使用大约 10 div 是无效的s 和另外 10 个显示和隐藏 div s.
我会使用很多行代码，但我不确定它是否有效。

Answer 1

您可以使用选择器 $(".item") 来获取您感兴趣的所有 div。

类选择器听起来像您需要的:http://api.jquery.com/class-selector/

一旦进入点击调用，您就可以区分 ID 并采取不同的操作。但是类选择器将允许您在所有感兴趣的 div 上使用点击事件处理程序。

示例代码如下

$(document).ready(function(){
    $(".item").click(function(e){
        // output the id of the clicked item
        console.log($(e.target).attr("id"));

        if($(e.target).attr("id")=="box1"){
            //do something for if the clicked item is box1.
            $("#box1").fadeOut(250);
            $("#box2").fadeIn(500);            
        }

    });
});