如何在具有多个标签的展开手风琴行中检测按钮单击 - How to Detect a Button Click in an Expanded Accordion Row with Multiple Labels

这是我自己的另一篇文章的扩展(如何在展开的手风琴行中检测按钮单击)。

在手风琴控件的详细信息部分添加了一些额外的行并将'Select'按钮移动到一个单独的div后，我只从第一个手风琴行获得值。这是我最初的问题。只是为了确认原来的解决方案工作，如果我移动我的"选择"按钮到保存div包含标签的位置，它传递正确的位置标签('labelAccordionLocation')值为任何行我已经扩展，但总是传递第一行的名称标签值。如果'选择'按钮在保存div中作为名称标签('labelAccordionName')，它也可以正常工作。

根据我的其他帖子的建议(它完美地为我原来的例子工作)，似乎我现在需要弄清楚如何识别包含每个标签的div，这样我就可以在点击"提交"按钮时传递它的值。虽然，这仍然只是一个业余爱好者的思维方式。

<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网站上做了一些搜索，试图找出这个问题，但不幸的是无法让它工作。如果需要提供额外的信息，我会尽力提供的。

编辑

我改变了标签的使用类而不是id的。虽然这是一个很好的建议，但我没有必要应用一个新的类"activeAccordion"。由于类"in"应用于扩展的行，因此我能够使用它进行访问，如下所示。我还更新了jsFiddle，并在底部提供了一个链接。

$('a.btn').click(function() {
    $('#accordion2').hide();
    $('#divDetails').show();
    $('#labelName').html($('.accordion-body.in .labelAccordionName').html());
    $('#labelLocation').html($('.accordion-body.in .labelAccordionLocation').html());
});

工作jsFiddle

http://jsfiddle.net/N8JuQ/

您应该考虑在if语句中转义出PHP，只在回显变量时返回。还可以阅读其他语法:http://php.net/manual/en/control-structures.alternative-syntax.php

while ($row = odbc_fetch_array($db)) {
if ($row['Name'] != $group){
?>
    <div class='accordion-heading'>
        <a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion2' href='#", <?php echo $row['Number']; ?>,"'>
          <button id='buttonAccordionToggle' data-target='#", <?php echo $row['Number']; ?>,"'>", <?php echo $row['Name']; ?>,"</button></a>
    </div>
    <div id='", <?php echo $row['Number']; ?>,"' class='accordion-body collapse'>
        <div class='accordion-inner'>
...
...
...
<?php
}
?>

当使用php生成html时，只要您在迭代，就要小心使用id。永远不要在DOM中生成相同的ID，这会把事情搞得一团糟。(即。选择，labelAccordionName, buttonAccordionToggle)我建议使用类或生成唯一的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>

之类的东西，没有检查，因为你没有提供jsfiddle。至于要正确检索的数据，我建议在活动手风琴体上添加一个类，然后在查找中使用该类选择正确的元素:

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