Question

我目前只能隐藏和显示网页上的内容。内容显示服务器处于联机或脱机状态。由于此列表很长，我想隐藏所有显示为“ LIVE”的服务器，但仍将显示“ DOWN”的部署。

勾选该框将隐藏<td>标记中等于“ LIVE”的所有内容，但是等于“ DOWN”的<td>标记仍将可见。

<span class="text-default">
  <input type="checkbox" style="display: none" class="down-checkbox" id="down" checked>
  <label for="down-checkbox">Only show offline servers</label>
</span>

<table>
  <thead>
    <tr>
    <th>No.</th>
    <th>Server</th>
    <th>URL</th>
    <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <?php
      $tests = array(array("test","test.test.test"));
      $i = 1;
      foreach($tests as $test => $testProperties)
      {
        echo "<tr>";
        echo "<td>$i</td>";
        echo "<td>".$testProperties[0]."</td>";
        echo "<td>".$testProperties[1]."</td>";
        if ($socket =@ fsockopen($testProperties[1], 80, $errno, $errstr, 1)) 
        {
          echo "<td><span class='badge badge-success'>LIVE</span></td>";
          fclose($socket);
        }
        else 
        {
          echo "<td><span class='badge badge-danger'>DOWN</span></td>";
        }
        echo "</tr>";
        $i++;
      }
    ?>
  </tbody>
</table>

$("down-checkbox").click(function() {
  $("<td><span class='badge badge-success'>LIVE</span></td>").hide();
});

Answer 1

您的逻辑有几个问题：

$("down-checkbox")不是有效的选择器。您缺少类选择器的前导.。
该复选框不可见。删除display: none
for的{{1}}属性应引用label的{{1}}，而不是其id。
在处理复选框而不是input时，请使用class事件，因为后者存在可访问性问题。
您要在jQuery选择器中放置一个HTML字符串，以查找“ LIVE”文本。这是不正确的，因为它将创建该元素。要搜索一个元素，请使用有效的选择器。在这种情况下，您可以搜索change仅检索活动实例，然后搜索click以获得其父实例.badge-success。
closest()将永远不会使该行再次出现。更好的主意是使用tr传递复选框的布尔hide()状态，以便根据需要隐藏/显示。

toggle()

checked

Answer 2

<script>
    $("down-checkbox").click(function(){
        $("td .badge").each(function(){
            if($($this).text() == "LIVE"){
                $($this).hide();
            }
            else if($($this).text() == "DOWN"){
                $($this).show();
            }
        });
    });
</script>

您还可以使用相反的逻辑来显示和隐藏基于LIVE / DOWN的状态

Answer 3

完全可以接受Rory的不错的答案，但是如果您现在不关心重构，请尝试使用jQuery :contains选择器：

$('span.badge.badge-success:contains("LIVE")').hide();

请注意，不要在其中放入HTML标记，因为这样做实际上是creating a new element，而不是处理现有标记。

为了展示我的观点，以下是一个快速演示，重点介绍了两种方法之间的区别：

$('#btn-create').click(function() {
  // This will create a new element dynamically 
  // and append it onto a div with class "container"
  $('<img src="https://via.placeholder.com/200" />').appendTo('div.container');
});

$('#btn-manipulate').click(function() {
  // This will manipulate the existing "img" element instead of creating a new, similar element
  $('img').css('width', '150px');
})

.container {
  background-color: lightgreen;
  display: inline-block;
  float: left;
  margin-right: 10px;
  height: 200px;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <!-- Initially empty -->
</div>

<div class="btn-group">
  <button id="btn-create">Create new element</button>
  <button id="btn-manipulate">Manipulate existing element</button>
</div>

Answer 4

脚本，您需要的是这样：

<script>
$(".down-checkbox").click(function(){
    $.each($(".badge.badge-success"), function(){
        $(this).closest("tr").hide();
    });
});
</script>

jQuery会选择所有“ .badge.badge-success”分类的行，它们是实时服务器，其余列表将仅包含DOWN服务器。

Answer 5

我已经修正了它，修改后的代码为：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
$('#hidelive').click(function(e) {
$.each($(".badge"), function(){
if($(this).is(':contains("LIVE")')) {
$(this).closest("tr").toggle();
}
});
});
});
</script>

<div id="hidelive">Only show offline servers</div>

服务器现在隐藏在文本上，单击：）

感谢大家的建议！非常感谢

隐藏复选框中的表行内容

5 个答案: