扩展div - 只需要点击的div在php echo中扩展 [英] expanding div - only want the clicked div to expand in php echo

问题描述

我从数据库回显结果，包括jquery扩展代码以在标题被点击时展开div，但是当前单击一个结果的标题时，所有其他echo'ed div都会展开。

有人可以帮助我做到这一点，只有点击的div才能扩展。谢谢你的任何帮助或建议！

这是脚本：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（。expanderHead）。click（function（）{
 $（＃expanderContent）。slideToggle（）; 
 if（$（＃expanderSign）。text（）==+）{
 $（＃expanderSign）。html（ - ）
} 
其他{
 $（＃expanderSign）。text（+）
} 
}）; 
}）; 
< / script> 
  

这是echo语句：

  echo< table width = '50％'style ='border-bottom：1px solid＃000000;'; 
回显< tr>; 
回显< 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>; 
 
 $ b 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 < / div>< div class ='reason2'style ='width：29％;'>单击此处了解更多信息< / a> ：& pound;。 $ row ['price']。 < / DIV>< / DIV> 中; 
 
 
 echo< / div>; 
回声< / td>; 
回声< / tr>; 
回声< / td>; 
回声< / tr>; 
 echo< / table>; 
  

解决方案

找到与当前点击相关的元素。

$ p $ $ $ $ $（document）.ready（function（）{
$（。 （）函数（）{
var $ exsign = $（＃expanderSign）;
$（this）.find（＃expanderContent）。slideToggle（）;
$ exsign.html（$ exsign.text（）=='+'？' - '：'+'）;
//使用三元运算符将您的if / else简化为一行
//如果$ exsign.text（）==+，则使用 - else+
}）;
}）;

I have results echo'ed from a database, i have included jquery expand code to expand the div when the title is clicked, however currently when a title of one result is clicked, all of the other echo'ed divs expand.

Could someone help me to make it so that only the clicked div expands. Thankyou for any help or advice!

this is the script:

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

this is the echo statement:

    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>";

解决方案

You can try using $(this) inside to only find elements relative to the current clicked

$(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 "+"
    });    
});

这篇关于扩展div - 只需要点击的div在php echo中扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！