Question

我有两个具有相同内容的div，必须在同一页面的不同位置显示。问题是，当我想在容器中显示东西时，我会在容器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() {
        $('.main').slideToggle(500);
    });

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

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

var methods = {
    init: function(options) {
        return this.each(function() {               
            var $this = $(this);       

        });
    }
};

$.fn.plugin = function(method) {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' + method + ' does not exist on jQuery.plugin');
    }
};

}）（jQuery的）;

Answer 1

这应该可以解决问题：

(function($) {

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

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

})(jQuery);

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

Answer 2

我不知道为什么你认为你需要一个插件 - 插件不会做任何你不能直接做的事情，尽管如果你经常使用它会使它更方便。 / p>

对于原始问题，其中两个容器具有相同的类，您可以这样做：

(function($) {

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

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

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

})(jQuery);

选择器$(".container2 .main");为您提供包含“.main”div的jQuery对象，而.eq() method允许您对指定的从零开始的索引执行操作。

既然你已经编辑了你的标记给他们不同的课程，你可以简单地说：

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

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

但是给它们唯一的ID比给独特的类更好。你可以给他们一个id属性和一个类。

Answer 3

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

使用jQuery来控制重复的div

3 个答案: