使用jQuery来控制重复的div

我有两个具有相同内容的div，必须在同一页面的不同位置显示。问题是，当我想在容器中显示两个东西时，我将在容器中创建相同的div。有没有办法让jQuery将每个容器视为单独的实体？我必须使用jQuery插件吗？使用jQuery来控制重复的div

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的） ;

来源

2012-02-01 okenshield

有什么理由不能给他们唯一的ID（除了共享类）吗？此外，为什么你选择你的“按钮”divs基于什么似乎是独特的类名称而不是IDS？ – nnnnnn 2012-02-01 10:36:04

我必须给他们上课。这里有更多的代码，这只是一个例子。我复制了很多代码，但需要将它们作为单独的实体对待，如果你知道我的意思:) – okenshield 2012-02-01 10:44:44

请不要在人们回答后改变你的问题。我给你写了一个关于你原来的html的答案，他们真的是重复的div，因为他们有同一个类的容器，并且在发布时发现，当我输入时你已经更新了问题，所以现在容器有不同的类（这是什么样的ID）。 – nnnnnn 2012-02-01 10:51:59

这应该做的伎俩：

(function($) { 

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

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

})(jQuery);

你将不得不重新命名上部容器类，虽然.container1。但我认为这是该计划，因为您在描述中将其称为container one。

来源

2012-02-01 10:36:08

这是一个很好的做法，但我有很多的jQuery，我不想改变它 - 请参阅原始问题的修正。 – okenshield 2012-02-01 10:49:16

不幸的是，您当前的jQuery代码无法做其他任何事情，但“滑动切换**包含类”.main“的所有**元素”。不更新你的代码，你永远不会能够区分你的div。 – 2012-02-01 10:56:21

-1

你可以在“container1”

来源

2012-02-01 10:40:57 Ging3r

嘿，我在这里帮助你....如果我看到两个具有相同名称的div类，而你的问题是只改变一个div，我可以认为你的问题是这个名字！ – Ging3r 2012-02-01 11:19:41

重命名第一个容器，我不知道为什么你认为你需要一个插件本 - 插件是不会做任何事情，你不能直接做的，虽然如果你使用它很多，它可能会更方便。

为了您原问题，其中两个容器有你可以做这样的同一类：

(function($) { 

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

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

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

})(jQuery);

凡选择$(".container2 .main");为您提供了同时含有“主要”的div和.eq() method一个jQuery对象允许您在指定的从零开始的索引处执行操作。

现在你已经编辑您的标记给他们不同的类，你可以简单地说：

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

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

但它会更好，给他们不是唯一的类唯一的ID。你可以给他们一个id属性和一个类。

来源

2012-02-01 10:45:44 nnnnnn

这是一个很好的做法，但我有很多的jquery，我不想改变这一切 - 请参阅修改原始问题。 – okenshield 2012-02-01 10:48:44

我不明白。我已经告诉过你如何为你的原始文件和修改后的html标记做这件事。我错过了什么？ – nnnnnn 2012-02-01 10:55:44

使用jQuery来控制重复的div

回答

相关问题