许多按钮 - >容器元素

喜欢的东西：

<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

许多按钮 - >容器元素

回答

相关问题