0

折りたたみ可能な要素のリストを作成する際に問題が発生しています。

私のコードは次のようになります。

<div class="projectscontainer">
    <span class="item destproject" title="ID: 384">Kaoweuzax-Xrjamjhxteaq</span><br>
    <div class="srcprojects">
        <div class="arrow-right"></div>
            <span class="item srcproject" title="ID: 1991">Eovwurxmpgmz 6.b</span><br>
    </div>
</div>
<div class="projectscontainer">
    <span class="item destproject" title="ID: 383">Uxiuhbgbt0.5-Rdsopvxc Fucxbhivs</span><br>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 1990">Zekgyfrmc-Tpuduwzr Idkudowbi</span><br>
    </div>
</div>
<div class="projectscontainer">
    <span class="item destproject" title="ID: 394">Lyxiyp</span><br>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 2108">Kdvdz</span><br>
    </div>
</div>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 2109">Derqi-AA_Boejbvr</span><br>
    </div>
    <div class="srcprojects">
        <div class="arrow-right"></div>
        <span class="item srcproject" title="ID: 2110">Yhdju-SkneLxiyuz</span><br>
    </div>

ここにjQuery：

$(document).ready(function(){
    $(".projectscontainer").click(function(){
      $(this).children('.srcprojects').toggle();
    });
});

PHP:

<?php
$result_rules = $db->query("SELECT rules.source_id, rules.destination_id, dest.project AS dest_project, src.project AS src_project, src.    pk_id as src_id
        FROM dbo.FFC_Rules rules
        INNER JOIN dbo.FFC_Destination dest
            ON dest.pk_id=rules.destination_id
        LEFT JOIN dbo.FFC_Source src
            ON src.pk_id=rules.source_id
        ORDER BY dest.project ASC");

$last_dest = false;
$last_src = false;
while($row = sqlsrv_fetch_array($result_rules)){  
    if ($row['destination_id'] !== $last_dest) {
        $last_dest=$row['destination_id'];
        echo "<div class='projectscontainer'>";
        echo    "-<span class='item destproject' title='ID: ".$row['destination_id']."'>".$row['dest_project']."</span>";
        echo    "<br>";
    }
        echo    "<div class='srcprojects'>";
        echo        "<div class='arrow-right'></div>";
    if ($row['src_id'] === null) {
        echo        " Source ID for Destination ID ".$row['destination_id']." is NULL ";
    } else {
        echo        "<span class='item srcproject' title='ID: ".$row['src_id']."'>".$row['src_project']."</span>";
    }
    echo            "<br>";
    echo        "</div>";
    echo    "</div>";
}
?>

現在、destproject の下に srcproject が 1 つしかない場合に機能しますが、destproject をクリックすると、destproject のすべての子 (srcproject) が非表示になるようにします。

各 destproject の最初の srcproject のみがマークアップの子であるため、機能していないことを理解しています。私が知らないのは、PHP コードのマークアップを修正する方法、または jQuery が機能するように変更する方法です。

JSFiddle

4

2 に答える 2

2

解決しました。ループを次のように変更しました。

$last_dest = false;
while($row = sqlsrv_fetch_array($result_rules)){  
    if ($row['destination_id'] !== $last_dest) {
        if ($last_dest !== false)
            echo "</div>";
        $last_dest = $row['destination_id'];
        echo "<div class='projectscontainer'>";
        echo    "<span class='item destproject' title='ID: ".$row['destination_id']."'>".$row['dest_project']."</span>";
        echo    "<br>";
    }
        echo    "<div class='srcprojects'>";
        echo        "<div class='arrow-right'></div>";
    if ($row['src_id'] === null) {
        echo        " Source ID for Destination ID ".$row['destination_id']." is NULL ";
    } else {
        echo        "<span class='item srcproject' title='ID: ".$row['src_id']."'>".$row['src_project']."</span>";
    }
    echo            "<br>";
    echo        "</div>";
}
echo        "</div>";
于 2013-03-19T17:31:15.293 に答える
1

を使用しfind()ます。

$(document).ready(function(){
    $(".projectscontainer").click(function(){
      $(this).find('.srcprojects').toggle();
    });
});

</div>問題を引き起こしている余分なタグがいくつかあるようです。それらを削除し、 jsFiddleを更新しました。

于 2013-03-19T01:47:53.983 に答える