Question

我有两个while循环一个在另一个中。在第二个循环中，我隐藏了包含一些信息的tr，当我点击一个带有'toggle'类的按钮时，我改变了css显示以及按钮所在的tr的背景。

一切都很好，只有当我点击按钮时它会改变所有的tr（带有class =“display”backrounds跟随我选择的那个，它只是改变按钮所在的tr。

我正在使用独特的ID，所以我不知道为什么它会改变所有的

while($myrow = $result->fetch_assoc()){
$content .= <<<EOF_
<tr id="cur{$myrow[inv]}" style="background-color:#e6f0ff">
<td height="25"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input id="but{$myrow[inv]}" class="toggle" style="width:50px" type="button" value="+"></td>
</tr>
<tr class="display" id="tr{$myrow[inv]}" style="display:none"><td colspan="6">
<table>
<tr>
<td></td><td></td><td></td>
</tr>
EOF_;
$sql_det = "SELECT * FROM `deliveries` WHERE `inv`='$myrow[inv]' ORDER BY `app_number`";
$result_det = $mysqli->query($sql_det);
while($myrow_det = $result_det->fetch_assoc()){
$content .= <<<EOF_
<tr><td></td><td></td><td></td><td></td></tr>
EOF_;
}
$content .= <<<EOF_
</table></td></tr>
EOF_;
}
$content .= <<<EOF_

我的Jquery：

$('.toggle').click(function(e) {
var row = $(this).closest('tr').next('tr').attr('id');
var current = $(this).closest('tr').attr('id');
    if($(this).val() == '-'){
        $(this).val('+')
        $('#'+current).css('background-color','#e6f0ff');
        $('#'+row).css('display', 'none');
   }
   else if($(this).val() == '+'){
       $(this).val('-');
       $('#'+current).css('background-color','#d1e2fb');
       $('#'+row).css('display', '');
  }
});

Answer 1

修复如下

替换

var row = $(this).closest('tr').next('tr').attr('id');
var current = $(this).closest('tr').attr('id');

与

var row = $(this).parent().parent().next('tr').attr('id');
var current = $(this).parent().parent().attr('id');

Answer 2

您不必获取id和current行的next，然后再次创建一个ID选择器来更改其样式，而只是指向目标元素并添加css样式。如下所示

始终使用===进行严格比较，因为您不直接比较字符串文字。

 $('.toggle').click(function(e) {
  var row = $(this).closest('tr').next('tr');
  var current = $(this).closest('tr');
  if($(this).val() === '-'){
    $(this).val('+')
    $(current).css('background-color','#e6f0ff');
    $(row).css('display', 'none');
 }
 else if($(this).val() === '+'){
   $(this).val('-');
   $(current).css('background-color','#d1e2fb');
   $(row).css('display', '');
 }
});

Jquery后台更改无法按预期工作

2 个答案: