gpt4 book ai didi

javascript - 使用具有特定类的触发器显示/隐藏 div 来切换具有相同类的 div

转载 作者:行者123 更新时间:2023-11-28 00:01:38 25 4
gpt4 key购买 nike

我有我的触发器div在while循环中显示/隐藏,而不是使用必须唯一的div id,我决定使用 div class 来显示/隐藏一组内容。

我想要实现的目标:

我对 javascript 一点也不擅长,而且我已经尝试了好几天了。假设我有一个 div class="view1-'.$id1.'" 触发器,其中 $id1=2div class="licom-'。 $cc_id.'" 其中 $cc_id=2 显示/隐藏,是否可以确保我的触发器仅显示/隐藏 div 类2 相同的 id?.

JavaScript

<html>
<head>
<script language="JavaScript">
$(document).ready(function(){
var showText='View all replies';
var hideText='Hide';
// initialise the visibility check
var is_visible = false;
// append show/hide links
$('.view1').prev().append();
$(".licom").hide();
$(".view1").click(function(){//i need to pass the div class with the variable
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
//i also need to pass the right div class with the right variable, and keep the others hidden
$('.licom').toggle(function() {
$(this).closest('view1').find('.licom').hide();
return false;
},
function() {
$(this).closest("view1").next(".licom").show();
return false;
});
});
});
</script>
</head>
<body>
</body>
</html>

info.php

  <?php
...........
$stmt = $conn->prepare(
"SELECT *
FROM comment
WHERE post_id = :pid
");

$stmt->bindParam(":pid", $type_id, PDO::PARAM_INT);


$stmt->execute();

while($obj = $stmt->fetch()){
$username = $obj['user_name'];
$comment = $obj['comment'];
$id1 = $obj['id'];
$userimage = $obj['user_image'];

echo '<div class="txt">';
echo '<div class="comment-container">';
echo '<div class="comment-item">';
echo '<div class="comment-avatar">';
echo '<img src="user/user_images/'.$userimage.'" alt="avatar">';
echo '</div>';
echo '<div class="comment-post">';
echo '<span style="font-weight:bold;">'.$username.'&nbsp&nbspsaid....
</span>';
echo '<p style="margin-left:-11px;">'.$comment.'</p>';
echo '<input type="hidden" name="comment_id" value="'.$id.'">';

//trigger to hide/show replies
echo '<span class="view1-'.$id1.'" style="float:right;margin-top:-15px;">View all replies</span>';
//

echo '</div>';

echo '</div>';

echo '</div>';

echo '</div>';
echo '</div>';

//Relpy to comment, show only the first row
$rep = $conn->prepare("SELECT * FROM reply WHERE comment_id = :comid LIMIT 1");
$rep->bindParam(":pid", $id1, PDO::PARAM_INT);


$rep->execute();

while($obj = $rep->fetch()){
//...........same output as first without the view all replies trigger......

//Relpy to comment, show from row 2-
$rep = $conn->prepare("SELECT * FROM reply WHERE comment_id = :comid LIMIT 1,18446744073709551615");
$rep->bindParam(":pid", $id1, PDO::PARAM_INT);


$rep->execute();

while($obj = $rep->fetch()){

$cc_id = $obj['comment_id'];
//div to show/hide
echo '<div class="licom-'.$cc_id.'">';
//...........same output as first without the view all replies trigger......

}
}
}
?>

我如何重写我的 JavaScript,以便默认情况下隐藏类 "licom" 的所有 div,并且只有与触发器具有相同 id 的 div 说 2,3 ,... 视情况可能会显示/隐藏 onClick。

最佳答案

按照问题评论中的要求:

“类似:http://jsfiddle.net/qjadyznh/?”

$('a').click(function(){
var id = $(this).attr('id');
if($('.'+id).css('display') == 'none')
{
$('.'+id).css('display','block');
}
else
{
$('.'+id).css('display','none');
}
})

关于如何实现所需目标的简单示例。

关于javascript - 使用具有特定类的触发器显示/隐藏 div 来切换具有相同类的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31748254/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com