我有一个根据下拉选择填充的手风琴。在每个手风琴行的"详细信息"部分,我有一个按钮,它只是隐藏整个手风琴并显示一个div(默认情况下是隐藏的)。div包含与所选行相同的详细信息,以及一些允许为该项提交请求的附加字段。第一个手风琴行工作正常,但当我点击任何其他行,什么也没发生。
我假设这是因为按钮在每行中命名相同。我可以很容易地将行标识符添加到按钮名称的末尾,以区分每个按钮,但我不知道如何检测哪个在我的jQuery中被选中。
页面的工作原理如下:当下拉选择时,我将其值传递给SQL语句。然后循环遍历每个数据库行并填充手风琴控件。每一行都可以展开以显示一个细节部分,其中包含一个用于显示隐藏div的按钮。当单击按钮时,我使用jQuery将这些值传递给隐藏div中的标签。
<div class="accordion" id="accordion2">
<?php
if (isset($_GET['src'])) {
// SQL stuff here
$group = null;
while ($row = odbc_fetch_array($db)) {
if ($row['Name'] != $group) {
echo "<div class='accordion-heading'>";
echo "<a class='accordion-toggle' data-toggle='collapse'
data-parent='#accordion2' href='#", $row['Number'],"'>
<button id='buttonAccordionToggle'
data-target='#", $row['Number'],"'>", $row['Name'],"</button></a>";
echo "</div>";
echo "<div id='", $row['Number'],"' class='accordion-body collapse'>";
echo "<div class='accordion-inner'>";
echo "<div class='control-group' style='min-height: 50px'>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<div class='span1'>";
echo "<label>Name:</label>";
echo "</div>";
echo "<div class='span11'>";
echo "<label id='labelAccordionName'>",
$row['UserName'],"</label>";
echo "</div>";
echo "</div>";
echo "<div class='span12'>";
echo "<a id='select' class='btn'>Select</a>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
$group = $row['Name'];
}
}
}
?>
</div>
<div id="divDetails" style="display: none;">
<label>Name:</label>
<label id="labelName"></label>
<a id="close" class="btn">Close</a>
</div>
<script>
// Hide the accordion and show the hidden div
$('#select').click(function() {
$('#accordion2').hide();
$('#divDetails').show();
// Pass the label value from the accordion row to the hidden div label
$('#labelName').html($('#labelAccordionName').html());
});
// Hide the div and show the accordion again
$('#close').click(function() {
$('#accordion2').show();
$('#divDetails').hide();
});
// Only allows one row to be shown at a time
$('.accordion-toggle').click(function() {
var $acc = $('#accordion2');
$acc.on('show', '.collapse', function() {
$acc.find('.collapse.in').collapse('hide');
});
});
$(document).ready(function(){
// On dropdown change, pass in value to populate accordion/details
$('#dd').change(function() {
var r = $(this).val();
location.href = "test.php?src=" + r;
});
});
</script>
我知道我可以像下面这样为选择按钮添加标识符,但我不知道如何使用jQuery捕获它:
echo "<a id='select", $row['Number'],"' class='btn'>Select</a>";
同样,第一行完全正常工作,但是当我单击任何其他行的Select按钮时,什么也没有发生
您不能复制元素id
。您已经在元素上有一个btn
类,所以只需将事件处理程序绑定到它:
$('a.btn').click(function() {
...
});
编辑
为了获得相关的label
文本,您必须使用this
(指单击的btn
)遍历DOM。
首先,确保你没有复制label
元素的id
, change:
<label id='labelAccordionName'>
<label class='labelAccordionName'>
然后,您应该能够使用以下命令(在您的a.btn
单击处理程序中):
$(this).parent().prev().find('.labelAccordionName').html();