如何检测具有多个标签的展开的手风琴行中的按钮单击

Posted 2023-03-24

技术标签:

【中文标题】如何检测具有多个标签的展开的手风琴行中的按钮单击【英文标题】：How to Detect a Button Click in an Expanded Accordion Row with Multiple Labels 【发布时间】：2013-05-11 11:26:58 【问题描述】：

这是我本人 (How To Detect a Button Click in the Expanded Accordion Row) 对另一篇帖子的扩展。

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

根据我另一篇文章中的建议（对于我的原始示例，它完美无缺），看来我现在需要弄清楚如何识别包含每个标签的 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/

【问题讨论】：

你能提供一个生成的php页面的工作小提琴示例吗？顺便说一句，将所有点击事件添加到文档就绪事件中，更安全。 【参考方案1】：

您应该考虑在您的 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

?>

【讨论】：

谢谢！让我快速实现这一点。等我搞定了，我会告诉你结果的。正如@TecHunter 建议的那样，我还将在文档就绪事件中移动我的所有点击事件。只是因为我很好奇，在准备好的文档中移动点击事件是否有某种优势，还是只是更符合良好做法？良好做法 + 它等待您的 DOM 完全加载然后添加事件。如果你只是在很高兴知道，我很快就会阅读更多内容。我按照@TecHunter 的建议拼凑了一个快速的 jsFiddle (jsfiddle.net/N8JuQ)。几天前我才第一次使用它，所以仍在学习它所提供的一切，不过是非常好的工具。第一次在手风琴行中单击“选择”时，没有任何通过，但如果您再次单击“关闭”和“提交”，您可以看到我在说什么（第 2 行的提交通过第 1 行值）。谢谢@MichaelDuncan 我编辑了我的 OP 并包含了一个工作的 jsFiddle。我肯定会阅读您提供的链接，因为我相信这将是一个很好的知识。【参考方案2】：

使用 php 生成 html 时，只要您在迭代，请小心使用 ID。永远不要在 DOM 中生成相同的 ID，这会让事情变得非常糟糕。（例如，select、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()));

【讨论】：

感谢您的建议，我现在可以使用了。我注意到由于某种我不知道的原因没有应用类“activeAccordion”，但由于扩展行已经从切换中应用了一个类“in”，因此我能够使用它来访问正确的行。我在原始帖子的底部进行了编辑，其中包含主要更改以及更新的工作 jsFiddle。非常感谢您的大力帮助，非常感谢。

以上是关于如何检测具有多个标签的展开的手风琴行中的按钮单击的主要内容，如果未能解决你的问题，请参考以下文章

如何通过单击组件中的图标来滚动和展开手风琴？

以编程方式折叠或展开 p:accordionPanel

如何检测在单个 Action 类中的多个提交按钮场景中单击的提交按钮？ [复制]

自定义单元格中的多个按钮。单击了哪一行中的哪个按钮？

根据选中的单选按钮展开和折叠手风琴

单击按钮时将默认 TableViewCell 更改为自定义子类