Php 如何在具有多个标签的展开的手风琴行中检测按钮单击
这是我对另一篇文章的扩展（） 在我的accordion控件的details部分添加了一些额外的行，并将“Select”按钮移动到一个单独的div中之后，我只从第一个accordion行获取值。这是我的原始版本。为了确认原始解决方案是否有效，如果我将“选择”按钮移动到包含位置标签的save div中，它将传递正确的位置标签（“labelAccordionLocation”）值，用于我展开的任何一行，但始终传递第一行的名称标签值。如果“选择”按钮作为名称标签（“labelAccordionName”）保存在save div中，它也可以正常工作 根据我在另一篇文章中的建议（在我最初的示例中，这一建议完美无瑕），我现在似乎需要找出如何识别包含每个标签的div，以便在单击“提交”按钮时传递其值。尽管如此，这仍然只是业余爱好者的思维方式Php 如何在具有多个标签的展开的手风琴行中检测按钮单击,php,jquery,accordion,Php,Jquery,Accordion,这是我对另一篇文章的扩展（） 在我的accordion控件的details部分添加了一些额外的行，并将“Select”按钮移动到一个单独的div中之后，我只从第一个accordion行获取值。这是我的原始版本。为了确认原始解决方案是否有效，如果我将“选择”按钮移动到包含位置标签的save div中，它将传递正确的位置标签（“labelAccordionLocation”）值，用于我展开的任何一行，但始终传递第一行的名称标签值。如果“选择”按钮作为名称标签（“labelAccordionName”
<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>
< /P> < P>你应该考虑在if语句中跳出PHP，只跳回输入变量。另外，请阅读其他语法：
while（$row=odbc\u fetch\u数组（$db））{
如果（$row['Name']！=$group）{
?>
您应该考虑在if语句中跳出PHP，只跳回以返回变量。也可以读另一种语法：
while（$row=odbc\u fetch\u数组（$db））{
如果（$row['Name']！=$group）{
?>
使用php生成html时，只要你在迭代，就要小心使用ID。永远不要在DOM中生成相同的ID，它会把事情搞得一团糟。（例如，select、labelAccordionName、ButtonAccordingTogle）我建议使用类或生成唯一ID加上泛型类
您应该有如下内容：
<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>
然后使用这个新类：
$('#labelName').html($('accordion-body.activeAccordion .labelAccordionName').html()));
$('#labelLocation').html($('accordion-body.activeAccordion .labelAccordionLocation').html()));
当用php生成html时，只要你在迭代，就要小心ID。永远不要在DOM中生成相同的ID，它会把事情搞得一团糟。（例如，select、labelAccordionName、ButtonAccordingToggle）我建议使用类或生成唯一ID加上泛型类
您应该有如下内容：
<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>
然后使用这个新类：
$('#labelName').html($('accordion-body.activeAccordion .labelAccordionName').html()));
$('#labelLocation').html($('accordion-body.activeAccordion .labelAccordionLocation').html()));
你能提供一个生成的php页面的工作fiddle示例吗？顺便说一句，在document ready事件中添加所有的点击事件，更安全。你能提供一个生成的php页面的工作fiddle示例吗？顺便说一句，在document ready事件中添加所有的点击事件，更安全。谢谢！让我很快实现它。完成后，我会让您知道结果。我还将按照@TecHunter的建议，在document ready事件中移动我的所有单击事件。只是因为我很好奇，在document ready中移动单击事件是否有某种优势，还是更符合良好做法？良好做法+等待DOM完全加载，然后添加事件。如果你只是把代码放进去，它会在JS引擎阅读时被解释，很好知道，我会很快读到更多。我按照@TecHunter的建议快速编写了一个JSFIDLE（）。我几天前才第一次使用它，所以仍然在学习它所提供的一切，不过这是一个很好的工具。当你第一次点击在其中一个accordion行中“Select”，不会传递任何信息，但是如果您再次单击“Close”和“Submit”，您可以看到我在说什么（第2行上的Submit传递第1行的值）。谢谢@MichaelDuncan我编辑了我的OP并包含了一个可用的JSFIDLE。我肯定会阅读你提供的链接，因为我相信这将是一个非常好的知识。谢谢！让我很快实现它。完成后，我会让你知道结果。我还会将文档就绪事件中的所有单击事件移动为@TecHunter建议。只是因为我很好奇，移动文档中的点击事件是否有某种优势，还是更符合良好实践？良好实践+等待DOM完全加载，然后添加事件。如果你只是在文档中抛出代码，那么当JS引擎读取它时会对其进行解释非常好我很快就会读到更多的内容。我按照@TecHunter的建议快速编写了一个jsFiddle（）。几天前我才第一次使用它，所以仍然在学习它提供的所有功能，尽管这是一个非常好的工具。当你第一次在一个手风琴行中单击“选择”时，没有任何东西会通过，但是如果你单击“关闭”和“提交”“第二次，您可以看到我在说什么（第2行的Submit传递第1行的值）.Thank@MichaelDuncan我编辑了我的OP并加入了一个有用的JSFIDLE。我肯定会阅读你提供的链接，因为我相信这将是一个很好的知识。谢谢你的建议，我现在已经开始使用它了。我注意到“activeAccordion”类不是因为我不知道的原因而被应用的，而是因为扩展了r现在已经有一个类“在”应用于它的切换，我能够使用它访问正确的行。我包括一个编辑在我的原始文章底部的主要变化，以及一个更新的工作JSFIDLE。非常感谢伟大的帮助，非常感谢。谢谢你的建议，我现在工作。我注意到了由于我不知道的原因，“activeAccordion”类没有被应用，但是由于扩展行已经从切换中获得了一个应用于它的类“in”，我能够使用它访问正确的行。我在我的原始文章底部添加了一个编辑，其中包含了主要更改以及一个更新的工作JSFIDLE。非常感谢t他帮了大忙，我们非常感激。
$('#labelName').html($('accordion-body.activeAccordion .labelAccordionName').html()));
$('#labelLocation').html($('accordion-body.activeAccordion .labelAccordionLocation').html()));