0

データベースからエコーされた結果があります。タイトルがクリックされたときに div を展開する jquery 展開コードが含まれていますが、現在、1 つの結果のタイトルがクリックされると、エコーされた他のすべての div が展開されます。

クリックされた div のみが展開されるように、誰かがそれを作るのを手伝ってくれませんか。助けやアドバイスをありがとう！

これはスクリプトです：

<script type="text/javascript">
$(document).ready(function(){
$(".expanderHead").click(function(){
    $("#expanderContent").slideToggle();
    if ($("#expanderSign").text() == "+"){
        $("#expanderSign").html("−")
    }
    else {
        $("#expanderSign").text("+")
    }
});
});
</script>

これはエコーステートメントです：

    echo "<table width='50%' style='border-bottom:1px solid #000000;'";
echo "<tr>";
echo "<td>";
echo "<div id='page-wrap'>";
echo "<div class='discounted-item freeshipping'>";

echo "<a href='./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "' rel='lightbox'><img src=\"./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "\" alt=\"\" width='15%' height='80%' /></a>";


echo "<div id='expanderHead'>";
echo "<div class='reasonbar'><div class='prod-title' style='width: 70%;'>" .$row['fname'] . "</div><div class='reason' style='width: 29%;'><b>". $row['firstname'] . " " . $row['surname'] ."</b></div></div>";


echo "<div id='expanderContent' style='display:none'><div class='reasonbar'><div class='prod-title1' style='width: 70%;'>" . $row['lname'] . "</div><div class='reason1' style='width: 29%;'>Category:<br /> ". $row['category'] . "</div></div></div>";

echo "<div class='reasonbar'><div class='prod-title2' style='width: 70%;'><a href='#' data-reveal-id='myModal".$count."'>Click here For more info</a></div><div class='reason2' style='width: 29%;'>Price: &pound;". $row['price'] . "</div></div>";


echo "</div>";
echo "</td>";
echo "</tr>";
echo "</td>";
echo "</tr>";
echo "</table>";
4

2 に答える 2

1

内部で $(this) を使用して、現在クリックされている要素に関連する要素のみを見つけることができます

$(document).ready(function(){    
    $(".expanderHead").click(function(){
        var $exsign = $("#expanderSign");
        $(this).find("#expanderContent").slideToggle();
        $exsign.html($exsign.text() == '+' ? '-': '+');   
        // simplify your if/else into one line using ternary operator
        // if  $exsign.text() == "+" then use "-" else "+"
    });    
});
于 2012-09-24T17:53:48.370 に答える
1

おそらく、クリック.classされたの一意ではなく全体を展開しているためです。#iddiv

あなたのコメントについて

これを片付けてくれてありがとう、それが機能するように、div id 名にカウント関数を追加する方法を知っていますか?

これが役立つかどうかを確認してください：

PHP による動的 ID
http://perishablepress.com/dynamic-body-class-id-php-wordpress/

jquery を使用した動的 ID 動的 ID を使用した
jQuery の選択

于 2012-09-24T17:34:03.677 に答える