0

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

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

4

2 回答 2

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
}
?>
于 2013-05-16T14:41:16.993 回答
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-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()));
于 2013-05-16T14:50:12.763 回答