Javascript 如何对同一类的不同div使用相同的JQuery效果

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

我需要为同一类的不同的

div

s添加一个jQuery效果，这样当我单击带有class

项的div
1
时，另一个div
info
将出现在特定的容器中。

此外，如果我单击具有相同类
项目的div
2
，另一个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无效。

我会使用很多行代码，但我不确定它是否能工作
 您可以使用选择器
$（“.item”）
获取您感兴趣的所有
div

类选择器听起来像您需要的：

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

下面是示例代码

$(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);            
        }

    });
});

您可以使用选择器
$（“.item”）
获取您感兴趣的所有
div

类选择器听起来像您需要的：

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

下面是示例代码

$(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);            
        }

    });
});

没有html，很难说清楚。但是，这里有一个起点

您现有的jQuery是这样的，它通过ID获取每个div

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

一个改进是使用类而不是ID，您可以这样做

注意：以下假设您为要触发PIC显示的div分配了不同的类或额外的
itempic
：

$(document).ready(function(){
    $(".item").click(function(){
        $(".info").fadeOut(250);
    });
    $(".itempic").click(function(){
        $(".pics").fadeIn(500);
    });
});

如果您有多个div将具有相同的功能（例如，您有一组产品，每个产品都有一个信息框和一个pic框），那么您需要对给定项目“包含”选择器。通过一些HTML示例，我可以提供一个考虑到这一点的答案。
如果没有您的HTML，很难说清楚。但是，这里有一个起点

您现有的jQuery是这样的，它通过ID获取每个div

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

一个改进是使用类而不是ID，您可以这样做

注意：以下假设您为要触发PIC显示的div分配了不同的类或额外的
itempic
：

$(document).ready(function(){
    $(".item").click(function(){
        $(".info").fadeOut(250);
    });
    $(".itempic").click(function(){
        $(".pics").fadeIn(500);
    });
});

如果您有多个div将具有相同的功能（例如，您有一组产品，每个产品都有一个信息框和一个pic框），那么您需要对给定项目“包含”选择器。通过一些HTML示例，我可以提供一个考虑到这一点的答案。
构建类似于此的HTML

<div id="container">
   <div id="info">info contents</div>
   <div id="pic">pic contents</div>
</div>

<div class="item" data-related="#info">your contents</div>
<div class="item" data-related="#pic">your contents</div>
..etc.

演示在
中构建与此类似的html

<div id="container">
   <div id="info">info contents</div>
   <div id="pic">pic contents</div>
</div>

<div class="item" data-related="#info">your contents</div>
<div class="item" data-related="#pic">your contents</div>
..etc.

演示在
使用jQuery进行选择时，需要使用#id_名称表示id，使用.class_名称表示类。选择div、tr、td时。。。名称前不需要特殊符号。因此：

$('#id_name').click(); // click on every item of the ID 'id_name'
$('.class_name').hide(); // make all items invisible that have class 'class_name'
$('tr').addClass('class_name'); // adds the class 'class_name' to all tr items

ID是唯一的。类可以出现多次

请阅读上面的例子

为了开始使用JS，jQuery非常好。非常快，但不要忘记jQuery是一个必须加载的库，使这些简短命令成为可能。纯javascript会更快。
不要忘记，您可以将JS和jQuery结合起来，因为jQuery就是JS。切换到纯JS也会让您看到脚本的具体功能。
使用jQuery进行选择时，您需要使用#id_name表示id，使用.class_name表示类。选择div、tr、td时。。。名称前不需要特殊符号。因此：

$('#id_name').click(); // click on every item of the ID 'id_name'
$('.class_name').hide(); // make all items invisible that have class 'class_name'
$('tr').addClass('class_name'); // adds the class 'class_name' to all tr items

ID是唯一的。类可以出现多次

请阅读上面的例子

为了开始使用JS，jQuery非常好。非常快，但不要忘记jQuery是一个必须加载的库，使这些简短命令成为可能。纯javascript会更快。
不要忘记，您可以将JS和jQuery结合起来，因为jQuery就是JS。切换到纯JS也会让您了解脚本的具体功能。
为我们展示一个html示例。那么，我们可以更容易地将您指向正确的方向。将元素存储在变量中以节省大量时间。您必须调用并理解Jquery选择器。请发布html代码，以便我们更好地理解。向我们展示一个html示例。那么，我们可以更容易地将您指向正确的方向。将元素存储在一个变量中以节省大量时间。您必须调用并理解Jquery选择器。请发布您的html代码，以便我们更好地理解。您的解决方案似乎是最好的，但它不适合我！！我做了你所做的事情，但没有成功！！注意：我已经将文本放在div中，类“item”放在标签中，并将“item”div排列在“ul”列表中..不管我解决了这个问题，谢谢你真的帮助了我：）你的解决方案似乎是最好的，但它对我不起作用！！我做了你所做的事情，但没有成功！！注意：我把文本放在div中，类“item”放在标签中，并将“item”div排列在“ul”列表中……不管我解决了这个问题，谢谢你真的帮助了我：）