我是 Jquery 和 Js 的初學者，我希望當我們按下加號和減號時，它只隱藏主要元素，與第一個元素相同。除了當我按下主元素的加號或減號按鈕時，它還顯示/隱藏第一個元素。我想分別顯示和隱藏。
我請求你的幫助
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
</head>
<body>
<section>
<div class="container">
<table id="table" class="table_ele">
<thead>
<tr>
<th>Main element</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">element1</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">element2</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">element3</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">element4</a>
</td>
</tr>
<tr>
<td>
<a class='clickable-more' href="#"><i class="fas fa-plus-square"></i></a>
<a class='clickable-minus' style="display: none" href="#"><i class="far fa-minus-square"></i></a>
</td>
</tr>
<tr class="tr_more">
<td>
<a href="#" class="btn btn-dark float-left">element5</a>
</td>
</tr>
<tr class="tr_more">
<td>
<a href="#" class="btn btn-dark float-left">element6</a>
</td>
</tr>
</tbody>
</table>
<table id="table" class="table_ele">
<thead>
<tr>
<th>First element</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">elementA</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">elementB</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">elementC</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-dark float-left">elementD</a>
</td>
</tr>
<tr>
<td>
<a class='clickable-more' href="#"><i class="fas fa-plus-square"></i></a>
<a class='clickable-minus' style="display: none" href="#"><i class="far fa-minus-square"></i></a>
</td>
</tr>
<tr class="tr_more">
<td>
<a href="#" class="btn btn-dark float-left">elementE</a>
</td>
</tr>
<tr class="tr_more">
<td>
<a href="#" class="btn btn-dark float-left">elementF</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.tr_more').hide();
$(".clickable-more").on('click', function() {
$(this).hide();
$('.tr_more').show();
$(this).next('a').show();
});
$(".clickable-minus").on('click', function() {
$(this).hide();
$('.tr_more').hide();
$(this).prev('a').show();
});
});
</script>
</html>uj5u.com熱心網友回復：
單擊隱藏所有tr_more元素的原因是因為在您的代碼中，您正在隱藏和顯示所有具有該類的元素，tr_more而不管它是哪個表。一種方法是選擇tr_more作為您單擊的表的一部分的元素，方法是使用closest()來查找父表，然后使用find()來獲取tr_more單擊的特定表的元素。試試下面的代碼。
<script>
jQuery(document).ready(function($) {
$('.tr_more').hide();
$(".clickable-more").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').show();
$(this).next('a').show();
});
$(".clickable-minus").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').hide();
$(this).prev('a').show();
});
});
</script>
更好的方法是使用 jquerytoggleClass切換tr_more元素的類名，并使用 css 更改該類名的顯示屬性。不是下面的確切代碼，但這是一個開始
.tr_more.show {
display: block;
}
$('.clickable-more').on('click', function() {
$(this).closest('table').find('.tr_more').toggleClass('show');
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/377288.html
標籤：javascript html 查询