如何检测按钮单击带有多个标签的展开的手风琴行 [英] How to Detect a Button Click in an Expanded Accordion Row with Multiple Labels
问题描述
This is an extension to another post by myself (How To Detect a Button Click in the Expanded Accordion Row).
在我的手风琴控件的详细信息部分中添加了一些其他行并将选择"按钮移到一个单独的div之后，我仅从第一手风琴行中获取值.这是我最初的问题.只是为了确认原始解决方案是否有效，如果我将选择"按钮移到包含位置"标签的保存div中，它将为我扩展的行传递正确的位置标签("labelAccordionLocation")值，但始终会通过第一个行的名称标签值.如果保存"分区中的选择"按钮作为名称"标签("labelAccordionName")，它也可以正常工作.
After adding some additional rows in the details section of my accordion control and moving the 'Select' button into a separate div, I am only getting the values from the first accordion row. This was my original issue. Just to confirm the original solution worked, if I move my 'Select' button into the save div containing the label for Location, it passes the correct location label ('labelAccordionLocation') value for what ever row I have expanded but always passes the first row's name label value. It also works correct if the 'Select' button is in the save div as the Name label ('labelAccordionName').
根据我在另一篇文章中的建议(对于我的原始示例而言，它是完美无缺的)，看来我现在需要弄清楚如何识别包含每个标签的div，以便在提交"Submit"时可以传递它的值. '按钮被点击.虽然，这仍然只是业余爱好者的思维方式.
Based on the suggestion in my other post (which worked flawlessly for my original example), it seems that I now need to figure out how to identify the div that contains each label so I can then pass it's value when the 'Submit' button is clicked. Although, this is still just an amateur's way of thinking.
<div class="accordion" id="accordion2">
<?php
// 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['Name'],"</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<div class='span1'>";
echo "<label>Location:</label>";
echo "</div>";
echo "<div class='span11'>";
echo "<label id='labelAccordionLocation'>",
$row['Location'],"</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row-fluid show-grid'>";
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><br />
<label>Location:</label>
<label id="labelLocation"></label><br />
<a id="close" class="btn">Close</a>
</div>
<script>
// Hide the accordion and show the hidden div
$('a.btn').click(function() {
$('#accordion2').hide();
$('#divDetails').show();
// Pass the label value from the accordion row to the hidden div label
$('#labelName').html($('.accordion-body.in .labelAccordionName').html());
$('#labelLocation').html($('.accordion-body.in .labelAccordionLocation').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网站上进行了一些搜索，试图找出答案，但不幸的是无法使其正常工作.我会尽力提供所需的任何其他信息.
I did some searching on the jQuery site to try and figure this one out but unfortunately was unable to get it working. I'll do my best to give any additional information that is needed.
编辑
我将标签更改为使用类而不是ID.尽管这是一个很好的建议，但我不必应用新的类"activeAccordion".由于将"in"类应用于展开的行，因此我可以使用它进行访问，如下所示.我还更新了jsFiddle，并在底部提供了一个链接.
I changed the label's to use classes instead of id's. Although a great suggestion, I did not have to apply a new class 'activeAccordion'. Since the class 'in' is applied to the expanded row, I was able to use it for access as seen below. I also updated the jsFiddle and provided a link at the bottom.
$('a.btn').click(function() {
$('#accordion2').hide();
$('#divDetails').show();
$('#labelName').html($('.accordion-body.in .labelAccordionName').html());
$('#labelLocation').html($('.accordion-body.in .labelAccordionLocation').html());
});
正在使用jsFiddle
推荐答案
使用php生成html时，只要您要迭代，请小心使用ID.永远不要在DOM中生成相同的ID，这会使事情变得非常糟糕. (例如，选择，labelAccordionName，buttonAccordionToggle)，我建议使用类或生成唯一的ID以及通用类
when generating html with php, as long as you are iterating be careful with IDs. Never generate same ID in a DOM, it messes things really bad. (ie. select, labelAccordionName, buttonAccordionToggle) I suggest using classes or generating unique IDs plus a generic class
您应该有类似的东西:
<div class="accordion" id="accordion2">
<?php
// 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 class='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 class='labelAccordionName'>",
$row['Name'],"</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<div class='span1'>";
echo "<label>Location:</label>";
echo "</div>";
echo "<div class='span11'>";
echo "<label class='labelAccordionLocation'>",
$row['Location'],"</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row-fluid show-grid'>";
echo "<div class='span12'>";
echo "<a class='select 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><br />
<label>Location:</label>
<label id="labelLocation"></label><br />
<a id="close" class="btn">Close</a>
</div>
<script>
类似的东西，没有检查，因为您没有提供jsfiddle.至于您要正确检索的数据，我建议在活动手风琴主体上添加一个类，然后在您的发现中使用该类来选择正确的元素:
something like that, didn't check as you don't provided a jsfiddle. As for your data to retrieve correctly, I would suggest adding a class on active accordion-body then in your finds use this class to select the correct element :
$('.accordion-toggle').click(function() {
var $acc = $('#accordion2');
$('.activeAccordion').removeClass('activeAccordion');
$(''+$(this).next('.buttonAccordionToggle').data('target')).addClass('activeAccordion');
$acc.on('show', '.collapse', function() {
$acc.find('.collapse.in').collapse('hide');
});
});
然后使用这个新类:
$('#labelName').html($('accordion-body.activeAccordion .labelAccordionName').html()));
$('#labelLocation').html($('accordion-body.activeAccordion .labelAccordionLocation').html()));
这篇关于如何检测按钮单击带有多个标签的展开的手风琴行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
