使用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

回答

相關問題