Ich bin gerade dabei, Inhalte auf meiner Webseite zu verstecken und anzuzeigen. Der Inhalt zeigt Server an, die online oder offline sind. Da diese Liste lang ist, möchte ich alle Server ausblenden, die als "LIVE" angezeigt werden, aber die Bereitstellungen, die "DOWN" sind, sind weiterhin sichtbar.

Wenn Sie das Kontrollkästchen aktivieren, wird der gesamte Inhalt der <td> -Tags ausgeblendet, die gleich "LIVE" sind. Die <td> -Tags, die gleich "DOWN" sind, sind jedoch weiterhin sichtbar.

<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();
});
0
Jeffrey 18 Jän. 2019 im 13:07

4 Antworten

Beste Antwort

Ich habe es behoben, ich rekonstruiere, Code geändert war:

<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>

Die Server verstecken sich jetzt auf dem Textklick :)

Vielen Dank an alle für die Vorschläge! Sehr geschätzt

0
Jeffrey 18 Jän. 2019 im 11:22
<script>
    $("down-checkbox").click(function(){
        $("td .badge").each(function(){
            if($($this).text() == "LIVE"){
                $($this).hide();
            }
            else if($($this).text() == "DOWN"){
                $($this).show();
            }
        });
    });
</script>

Sie können auch die umgekehrte Logik verwenden, um den LIVE / DOWN-Status anzuzeigen und auszublenden

0
Alpesh Dalvadi 18 Jän. 2019 im 10:21

Das Skript, was Sie brauchen, ist wie folgt:

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

Die jQuery wählt alle Zeilen der Klasse ".badge.badge-success" aus, bei denen es sich um die Live-Server handelt. Die verbleibende Liste enthält nur die DOWN-Server.

0
DiabloSteve 18 Jän. 2019 im 12:37

Würde Rorys netter Antwort voll und ganz folgen, aber wenn Sie sich im Moment nicht für Refactoring interessieren, geben Sie jQuery :contains Wählen Sie einen Versuch aus:

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

Beachten Sie, dass Sie das HTML-Tag NICHT darin einfügen, da Sie dadurch tatsächlich ein neues Element erstellen anstatt die vorhandenen zu manipulieren.


Um meinen Standpunkt zu verdeutlichen, folgt eine kurze Demo, in der der Unterschied zwischen den beiden Ansätzen hervorgehoben wird:

$('#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>
0
Yom S. 18 Jän. 2019 im 10:52