使用jQuery控制重复的div_Jquery_Html_Css

使用jQuery控制重复的div

jquery html css

使用jQuery控制重复的div,jquery,html,css,Jquery,Html,Css,我有两个具有相同内容的div，它们必须显示在同一页面的不同位置。问题是，当我想在容器2中显示内容时，我会在容器1中使用相同的div。有没有办法让jQuery将每个容器视为单独的实体？我必须使用jQuery插件吗 HTML <body> <div class="container1"> <div class="main" style="display:none"> Lorem ipsum dolor sit ame

我有两个具有相同内容的div，它们必须显示在同一页面的不同位置。问题是，当我想在容器2中显示内容时，我会在容器1中使用相同的div。有没有办法让jQuery将每个容器视为单独的实体？我必须使用jQuery插件吗

HTML

<body>
    <div class="container1">
        <div class="main" style="display:none">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu     fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,  sunt in     culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
    ...
    <div class="container2">
        <div class="main" style="display:none">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu     fugiat n    ulla pariatur. Excepteur sint occaecat cupidatat non            proident,   sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    <div>

    <div class="button1">Display top main div</div>
    <div class="button2">Display bottom main div</div>
</body>

//我可以使用这个插件吗（函数（$）{

})（jQuery）

这应该可以做到：

(function($) {

    $(".button1").click(function() {
        $('.container1 .main').slideToggle(500);
    });

    $(".button2").click(function() {
        $('.container2 .main').slideToggle(500);
    });

})(jQuery);

但是，您必须将顶级容器的类重命名为.container1。但我假设这就是计划，因为在您的描述中，您将其称为

容器1

。

您可以重命名“container1”中的第一个容器

我不知道您为什么认为需要一个插件来完成此任务-插件不会做任何您无法直接完成的事情，虽然如果你经常使用它可能会使它更方便

对于您最初的问题，如果两个容器具有相同的类，您可以这样做：

(function($) {

    var $mainDivs = $(".container2 .main");

    $(".button1").click(function() {
        $mainDivs.eq(0).slideToggle(500);
    });

    $(".button2").click(function() {
        mainDivs.eq(1).slideToggle(500);
    });

})(jQuery);

其中选择器

$（“.container2.main”）为您提供一个jQuery对象，其中包含“.main”div和，允许您在指定的从零开始的索引处对该div执行操作
现在，您已经编辑了标记，为它们提供了不同的类，您可以简单地说：
    $(".button1").click(function() {
        $(".container1 .main").slideToggle(500);
    });

    $(".button2").click(function() {
        $(".container2 .main").slideToggle(500);
    });

但是给它们提供唯一的ID比给它们提供唯一的类要好得多。您可以给他们一个id属性和一个类。
除了共享类之外，您为什么不能给他们唯一的id？还有，为什么你要根据唯一的类名而不是ID来选择“button”div？我必须给它们类。代码比这多得多，这只是一个例子。我复制了很多代码，但如果你知道我的意思，我需要将它们视为单独的实体：）请不要在别人回答后更改你的问题。我为您的原始html写了一个答案，其中它们实际上是重复的div，因为它们有具有相同类的容器，发布时发现，当我键入时，您更新了问题，因此现在容器具有不同的类（这就是ID的用途）.这是一个很好的方法，但我有很多jquery，我不想全部更改-请参阅对原始问题的修改。我不明白。我已经告诉过您如何对原始和修改后的html标记执行此操作。我遗漏了什么？这是一个很好的方法，但我有很多jquery，我不想全部更改-请参阅对原始问题的修改。不幸的是，当前的jquery代码除了“滑动切换包含类.main的所有元素”之外什么都做不了。如果不更新您的代码，您将永远无法区分您的div。嘿，我在这里帮助您…如果我看到两个同名的div类，而您的问题是只更改一个div，我可以认为您的问题是名称！！！！
(function($) {

    var $mainDivs = $(".container2 .main");

    $(".button1").click(function() {
        $mainDivs.eq(0).slideToggle(500);
    });

    $(".button2").click(function() {
        mainDivs.eq(1).slideToggle(500);
    });

})(jQuery);

    $(".button1").click(function() {
        $(".container1 .main").slideToggle(500);
    });

    $(".button2").click(function() {
        $(".container2 .main").slideToggle(500);
    });