显示和隐藏所有同名的div
显示和隐藏所有同名的div
提问于 2018-08-16 03:52:30
首先，我对jQuery非常陌生，这是我第一次尝试使用它。
我用php编写了这段代码
echo "<table><tr onclick=\" myFunction($id) \" style=\"$style\" id =\"set_\" ><td>Click</td></tr></table>";我希望如果我点击这个tr，myFuction函数就会启动，并且这个函数的代码：
function myFunction(id) {
var id = "set_";
if (document.getElementById(id.concat(id)).style.display === "block") {
document.getElementById(id.concat(id)).style.display = "none";
x++;
} else {
document.getElementById(id.concat(id)).style.alignItems = "center";
document.getElementById(id.concat(id)).style.display = "block";
x--;
}
if (x == 0) {
document.getElementById("table").style.visibility = "hidden";
} else {
document.getElementById("table").style.visibility = "visible";
}
}它在这里显示：
for ($x = 0; $x < $i; $x++) {
echo "<tr>";
echo "<td id='set_$id' style='display: none'>";
echo $result_path[$x];
echo "</td>";
echo "</tr>";
}因此，通常我有多个td用于其中一些，但myFunction只显示其中的一个。我看到我可以通过jQuery来展示它，我尝试了一下：
$(document).click(myFunction(req_id){
var id = "set_";
var id2 = id+req_id;
$("$id2").show();
});现在我刚试过这个节目，但是我不能，你能帮我吗？谢谢。
回答 1
Stack Overflow用户
发布于 2018-08-16 04:41:53
这是一个使用jQuery的实现，就像您在问题中建议的那样，并且不再使用id，而是使用data-groupid属性。
编辑-已更新以支持display: none
function myFunction(req_id) {
// use jquery to find all the elements that have that same id
$('td[data-groupid="set_' + req_id + '"]').toggle();
// find all the visible elements in #table
let visible = $('#table td')
.filter(function() {
return $(this).css('display') == 'table-cell'
} )
.length;
// check if the length is > 0 and show the contianing table if need be.
if (visible)
$('#table').show();
else
$('#table').hide();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
</tr>
<tr onclick=" myFunction(376) " style="cursor:hand; background: lightgrey;">
<td><img src="thumbnails_ 376.jpg"></td>
</tr>
<tr onclick=" myFunction(377) " style="cursor:hand; background: lightgrey;">
<td><img src="thumbnails_ 377.jpg"></td>
</tr>
</table>
<table id='table' style="display: none; ">
<tr>
<th> Output adı:</th>
</tr>
<tr>
<td data-groupid='set_376' style='display: none;'>result1_1</td>
</tr>
<tr>
<td data-groupid='set_376' style='display: none;'>result1_2</td>
</tr>
<tr>
<td data-groupid='set_377' style='display: none;'>result2_1</td>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51865520
复制相关文章
相似问题