许多button-> container元素

Question

我有几个相等的按钮和容器；

就像是：

<div>
   <button class="myCoolButton">
       btn1
   </button>
</div>

<div class="myCoolContainer">
   container
</div>

<div>
   <button class="myCoolButton">
       btn1
   </button>
</div>

<div class="myCoolContainer">
   container
</div>

<div>
   <button class="myCoolButton">
       btn1
   </button>
</div>

<div class="myCoolContainer">
   container
</div>

因此，当用户单击按钮时，我需要在下面的容器中显示一些信息。 但是我如何理解需要使用哪个容器？ 将带有bindend容器的属性放到按钮上好吗？ 什么是最佳做法？

jsfiddle

注意：日历必须以黄色矩形显示

Answer 1

$('buttonselector').click(function(){ 
      $(this) // get clicked button
      .parent() // parent of clicked buton, i.e div at odd place
       .next() // next div to parent div of clicked button, i.e, div at even place
        .html('set some value') // set value to adjacent div
})

编辑

<div>
   <button id="btn1">
       btn1
   </button>
</div>

<div id="Container_btn1">
   container
</div>

$('#btn1').click(function(){ 
        var name= $(this).attr('id'); 
        $("#container_"+ name).html('set some value')
}); 

Answer 2

尝试这个。

$(".myCoolButton").click(function(){
    $(this).closest("div").next().html("triggered");
});

Answer 3

var myCoolButtons = $('.myCoolButton');
var myCoolContainers = $('.myCoolContainer');
myCoolButtons.click(function() {
    var index = $(this).index(myCoolButtons);
    myCoolContainers.eq(index).html('CoolButton right before me is clicked');
});

Answer 4

$('.myCoolButton').click(function(){

      $(this).parent().next('div').html('hello world');
});

http://jsfiddle.net/NNpvZ/

Answer 5

也许您可以尝试一下， http：//jsfiddle.net/konglie/zpVWY/

    $('button.myCoolButton').click(function(){
    var container = $(this).parent().next('div.myCoolContainer')[0];
    $(container).html('clicking on ' + $(this).text());
});

Answer 6

如果要在整个页面上放置按钮，并在整个页面上放置相应的容器，那么在不扩展结构的情况下很难找到合适的容器。 您是否考虑过添加一个使容器与按钮匹配的新类？ 在那种情况下，无论您在哪里拥有它，都可以确定要引用哪个容器。 例如，您可以为按钮添加类button1，为容器添加类container1（代替ID可能有任何常见的模式）。