我有两个具有相同内容的 div，它们必须显示在同一页面的不同位置。问题是，当我想在容器二中显示内容时，我会在容器一中产生相同的 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);
最佳答案
这应该可以解决问题:
(function($) {
$(".button1").click(function() {
$('.container1 .main').slideToggle(500);
});
$(".button2").click(function() {
$('.container2 .main').slideToggle(500);
});
})(jQuery);
不过，您必须将顶级容器的类重命名为 .container1。但我认为这是计划，因为您在描述中将其称为 container one。
关于jquery - 使用 jQuery 控制重复的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9094316/