許多按鈕 - >容器元素

喜歡的東西：

<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

注：日曆必須在黃色矩形

來源

2011-08-23 Neir0

要顯示信息的容器是按鈕的父級？ – Matijs

@Matijs不，它不是。它位於按鈕容器下方。其實它可能無處不在。 – Neir0

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

來源

2011-08-23 08:45:27 hungryMind

這是一個很好的直接解決方案。但是如果我稍微改變一下html代碼呢？例如，將容器uder移動到頁面的頁腳？ – Neir0

如果目標div位於頁面的任何位置，則需要識別它。將目標div傳遞給你的函數或者使用前綴「容器」+ ButtonID來配對按鈕和div – hungryMind

你必須確保文檔中有一點結構。如果它們完全隨意地分佈在整個頁面上，並且它們都具有相同的名稱，那麼誰能說出哪個DIV可以顯示？當HTML結構發生變化時，您會相應地調整Javascript部分。但是他們必須具有與按鈕相匹配的唯一名稱，或者是DOM樹中的子元素或下一個元素。 –

試試這個來表現。

來源

2011-08-23 08:47:40 naveen

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

來源

2011-08-23 08:50:39 Jeongee

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

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

http://jsfiddle.net/NNpvZ/

來源

2011-08-23 08:51:38 Rafay

可能是你可以試試這個，http://jsfiddle.net/konglie/zpVWY/

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

來源

2011-08-23 08:55:00 Lee

如果你想放置按鈕全部移到網頁上，在頁面上所有相應的容器，那麼在不擴展結構的情況下找到合適的容器是非常困難的。你有沒有考慮添加一個新的類，該容器與按鈕相匹配？在那種情況下，無論你在哪裏擁有它，你都會確定你想要引用哪個容器。例如，你可以爲button和container1添加class button1作爲容器（而不是ID，可能有任何常見模式）。

來源

2011-08-23 08:55:17 mkk

許多按鈕 - >容器元素

回答

相關問題