1

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

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

<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）を非表示にします。

3番目のprojectscontainerdivでは、すべてのsrcprojectsが出力される前に、終了divタグが追加されます。どうすればこれを修正できますか？

4

2 に答える 2

0

ループに何か奇妙なことがあります。あなたは開いています

<div class='projectscontainer'>

この状態で

if ($row['destination_id'] !== $last_dest) {

しかし、あなたは<div>同じ条件で閉じているのではなく、条件なしで閉じてい<div>ます。生成されたHTMLは整形式ではなく、ブラウザはそれを修正するために最善を尽くそうとします（無駄です）。

試す：

// Initialize the last dest
$last_dest = false;

// Loop on each result
while($row = sqlsrv_fetch_array($result_rules)) {

    // Check if the section is changing or if we are at the begining
    if ($row['destination_id'] !== $last_dest || $last_dest === false) {

        // Close the previous projectscontainer tag if we are not at the begining of the process
        if ($last_dest !== false)
            echo "</div>";

        // Update the last dest
        $last_dest = $row['destination_id'];

        // Open the new projectscontainer 
        echo "<div class='projectscontainer'>";
        echo    "-<span class='item destproject' title='ID: ".$row['destination_id']."'>".$row['dest_project']."</span>";
        echo    "<br>";
    }

    // Print the sub block
    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>";
}

// At the end at the process, close the last projectscontainer
echo "</div>";
于 2013-03-19T04:59:00.407 に答える
0

最後のプロジェクトのすべての子を非表示にする必要があると思います。その場合は、HTMLコンテンツをこれに変更する必要があります。

    <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 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>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Fcnlw-YTR-Orzqksr</span>
    <br>
</div>

<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Awhsa-DT</span>
    <br>
</div>

<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Kxqda-WuxkorctkwmWlioamud</span>
    <br>
</div>
<div class="srcprojects">
    <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Jnlps-NcsgfdlbpzaAhdthi</span>
    <br>

</div>

于 2013-03-19T05:16:48.923 に答える