0

ドロップダウンの選択に基づいて入力されるアコーディオンがあります。各アコーディオン行の「詳細」セクションには、アコーディオン全体を単純に非表示にし、div (デフォルトでは非表示) を表示するボタンがあります。div には、選択した行と同じ詳細と、そのアイテムのリクエストを送信できるようにする追加のフィールドが含まれています。最初のアコーディオン行は正常に動作しますが、他の行をクリックしても何も起こりません。

これは、ボタンの名前が各行で同じであるためだと思います。ボタン名の最後に行識別子を簡単に追加してそれぞれを区別できますが、jQuery で選択されているものを検出する方法がわかりません。

このページは次のように機能します。ドロップダウンの選択が行われると、その値が SQL ステートメントに渡されます。次に、データベースの各行をループして、アコーディオン コントロールに入力します。各行を展開して、非表示の div を表示するためのボタンを含む詳細セクションを表示できます。ボタンがクリックされると、jQuery を使用してこれらの値を隠し 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 を使用してそれをキャッチする方法がわかりません。

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

繰り返しますが、最初の行は正確に機能しますが、他の行の [選択] ボタンをクリックしても何も起こりません。

4

1 に答える 1

3

要素を複製することはできませんid。要素にはすでに のクラスがあるbtnので、代わりにイベント ハンドラーをそれにバインドします。

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

編集

関連するテキストを取得するには、 ( clicked を参照する)labelを使用して DOM をトラバースする必要があります。thisbtn

idまず、label要素の を複製していないことを確認し、次のように変更します。

<label id='labelAccordionName'>

に

<label class='labelAccordionName'>

a.btn次に、(クリック ハンドラーで) 以下を使用できるようにする必要があります。

$(this).parent().prev().find('.labelAccordionName').html();
于 2013-05-15T14:37:49.397 に答える