CODEWITHSUNDEEP
javascriptjqueryhtml
Neir0
Neir0

Reputation: 13377

Many button->container elements

i have a few equal buttons and containers;

Something like:

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

So when user clicks on button i need to show some info in to container below. But how i can understand what container i need to use? Is it good to put attribute with bindend container to button? What is best practice?

jsfiddle

NOTE: calendar must be showed in yellow rectangle

Upvotes: 0

Views: 1222

Answers (6)

hungryMind
hungryMind

Reputation: 7009

$('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
})

EDIT

<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')
});

Upvotes: 3

Jeongee
Jeongee

Reputation: 1

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

Upvotes: 0

mkk
mkk

Reputation: 7693

If you want to place buttons all over the page and corresponding containers all over the page, then it would be very hard to find the right container without extending your structure. Did you consider adding a new class that matches container with the button? in that case no matter where you would have it, you would be sure which container you want to refer to. For example you could add class button1 for button and container1 for container (instead of ID's there might be any common pattern).

Upvotes: 0

Lee
Lee

Reputation: 3329

may be you can try this, http://jsfiddle.net/konglie/zpVWY/

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

Upvotes: 0

Rafay
Rafay

Reputation: 31043

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

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

http://jsfiddle.net/NNpvZ/

Upvotes: 0

codeandcloud
codeandcloud

Reputation: 55248

Try this.

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

Upvotes: 0

Related Questions