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 に答える