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，可能有任何常见模式）。

许多button-＆gt;容器元素

6 个答案: