如何检测按钮单击展开的手风琴行 [英] How To Detect a Button Click in the Expanded Accordion Row

问题描述

我有一个手风琴，它是根据下拉选择进行填充的.在每个手风琴行的详细信息"部分，我有一个按钮，它简单地隐藏了整个手风琴并显示了一个div(默认情况下是隐藏的). div包含与所选行相同的详细信息，以及一些其他字段，以允许对该项目提交请求.手风琴的第一行工作正常，但是当我单击任何其他行时，什么也没发生.

I have an accordion which gets populated based on a dropdown selection. In the 'details' section of each accordion row, I have a button which simply hides the entire accordion and shows a div (which is hidden by default). The div contains the same details as the row selected as well as some additional fields to allow a request be submitted for that item. The first accordion row works fine but when I click on any other row, nothing happens.

我假设这是因为按钮在每一行中的名称都相同.我可以轻松地将行标识符添加到按钮名称的末尾，以区分每个按钮，但我不知道如何检测jQuery中选择了哪个.

I'm assuming this is because the buttons are named the same in each row. I can easily add the row identifier to the end of the button name to differentiate each but I can't figure out how to detect which is selected in my jQuery.

页面的工作方式如下:进行下拉选择时，我将其值传递给SQL语句.然后，我遍历每个数据库行并填充我的手风琴控件.每一行都可以展开以显示一个详细信息部分，其中包含一个用于显示隐藏的div的按钮.单击按钮时，我使用jQuery将这些值传递给隐藏div中的标签.

The page works as follows: When a dropdown selection is made, I pass it's value to a SQL statement. Then I loop through each database row and populate my accordion control. Each row can be expanded to show a details section which contains a button used to show the hidden div. When the button is clicked, I use jQuery to pass those values to labels in the hidden 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来捕获它:

I know I can add an identifier to the Select button like below but I don't know how to catch that using jQuery:

echo "<a id='select", $row['Number'],"' class='btn'>Select</a>";

同样，第一行完全按照应有的方式工作，但是当我单击其他任何行上的选择"按钮时，什么也没有发生.

Again, the first row works exactly how it should but nothing happens when I click the Select button on any of the other rows.

推荐答案

您不能复制元素id.您已经在元素上具有btn类，因此只需将事件处理程序绑定到该类上即可:

You can't duplicate element id's. You already have a class of btn on the element, so just bind the event handler to that instead:

$('a.btn').click(function() {
    ...
});

---

编辑

为了获取相关的label文本，您必须使用this(指的是单击的btn)遍历DOM.

---

edit

In order to get the relevant label text, you'll have to traverse the DOM using this (which refers to the clicked btn).

首先，确保您没有复制label元素的id，更改:

First, make sure you're not duplicating the id of the label element, change:

<label id='labelAccordionName'>

到

<label class='labelAccordionName'>

然后，您应该能够使用以下内容(在您的a.btn单击处理程序中):

Then, you should be able to use the following (in your a.btn click handler):

$(this).parent().prev().find('.labelAccordionName').html();

这篇关于如何检测按钮单击展开的手风琴行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！