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

时间：2013-05-16 14:05:59

标签： php jquery accordion

这是我自己的另一篇文章的扩展（How To Detect a Button Click in the Expanded Accordion Row）。

在我的手风琴控制的详细信息部分添加一些额外的行并将“选择”按钮移动到一个单独的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/

2 个答案:

答案 0 :(得分：2)

你应该考虑在你的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
}
?>

答案 1 :(得分：1)

用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-body上添加一个类然后在你的find中使用这个类来选择正确的元素：

$('.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()));
相关问题
最新问题