JQuery Ajax für Ergebnisse des Eingabe-Kontrollkästchens umkehren oder ausblenden

Question

Ich habe keine guten Kenntnisse über jquery, daher funktioniert ein Code gut, aber das Problem besteht darin, das Ergebnis auszublenden, wenn das Kontrollkästchen deaktiviert ist. (Aktivieren Sie dieses Kontrollkästchen, um die Ergebnisse aus der Datenbank abzurufen. Deaktivieren Sie das Kontrollkästchen Diese Ergebnisse ausblenden.)

catfd.php Code

 <input type="checkbox" value="2" class="catcf"> catfd2 <br />
 <input type="checkbox" value="35" class="catcf"> catfd35 <br />
 <input type="checkbox" value="22" class="catcf"> catfd22 <br />
 <input type="checkbox" value="133" class="catcf"> catfd133 <br />
 <input type="checkbox" value="28" class="catcf"> catfd28 <br />
 <input type="checkbox" value="33" class="catcf"> catfd33 <br />
 <input type="checkbox" value="55" class="catcf"> catfd55 <br />
 <input type="checkbox" value="44" class="catcf"> catfd44 <br />
 <div class="main-area-courses-continer">
<!-- here will echo the results -->

</div>

jquery ajax code erhält das Ergebnis von der PHP-Seite 'getvalue.php'

if(isset($_POST['catcf'])){ ?> <div class="main-area-courses-continer" > <?php $catcfid= $_POST['catcf']; $sql = 'SELECT * FROM tablename  where cat_id = '.$catcfid.' order by p_id asc'; $catandproid = $wpdb->get_results($sql);
    foreach($catandproid as $key){
/////////////////////////////////Updates
?>
<div class="<?php echo $catcfid; ?>" > <?php echo $key->title;
?>
</div><!-- End of Continer catcfid -->
<?php
////////////////////////////////////////////
    }
}
?>
</div>

und das ist der Ajax-Abfragecode

$(document).ready(function() { $(".catcf").on('click', function() {
    if ($('input.catcf').is(':checked')) { var catcf = Number($(this).val());
      $.ajax({ url: 'getvalue.php', type: 'post', data: { catcf: catcf }, beforeSend: function() { $(".main-area-courses-continer").html("Looding....");
        },
        success: function(response) {
          // Setting little delay while displaying new content
          setTimeout(function() {
            // appending posts after last post with class="post"
            $(".main-area-courses-continer:last").after(response).show().fadeIn("slow"); $(".main-area-courses-continer").html("");
          }, 2000);
        }
      });
    }
  });
});

Answer 1

Sie können überprüfen, ob das Div mit class="catcfid"in Ihrem DOM vorhanden ist oder nicht, $(".main-area-courses-continer > ." + catcf).length == 0wenn die Länge 0bedeutet, dass es kein solches Div gibt. Dann können Sie eine Ajax-Anfrage stellen, um das aus dem Backend zu holen. Andernfalls zeigen Sie das Div mit $("." + catcf).parent().show();else an, wenn Sie uncheckeddieses Div mit ausblenden $("." + catcf).parent().show();.

Demo-Code :

$(document).ready(function() {
  $(".catcf").on('click', function() { var catcf = Number($(this).val());
    if ($(this).is(':checked')) { //check if the div with class catcf is not there if ($(".main-area-courses-continer >  ." + catcf).length == 0) {
        /*.ajax({
           url: 'getvalue.php',
           type: 'post',
           data: {
             catcf: catcf
           },
           beforeSend: function() {
             $(".main-area").html("Looding...."); }, success: function(response) {*/ setTimeout(function() { //$(".main_container:last").after(response).show().fadeIn("slow");
          //dummy data append ..
          $(".main_container:last").after('<div class="main-area-ourses-continer"><div class="' + catcf + '">catfd' + catcf + ' data....</div> </div>') $(".main-area").html("")//empty loading ..
        }, 100);
        /*
        });*/

      } else {
        //show that class 
        $("." + catcf).parent().show(); } } else { //hide that class means unchecked $("." + catcf).parent().hide()
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="2" class="catcf" checked> catfd2 <br />
<input type="checkbox" value="35" class="catcf"> catfd35 <br />
<input type="checkbox" value="22" class="catcf" checked> catfd22 <br />
<input type="checkbox" value="133" class="catcf"> catfd133 <br />
<input type="checkbox" value="28" class="catcf"> catfd28 <br />
<input type="checkbox" value="33" class="catcf"> catfd33 <br />
<input type="checkbox" value="55" class="catcf" checked> catfd55 <br />
<input type="checkbox" value="44" class="catcf"> catfd44 <br /> Datas :
<!--put this div for loading separtely-->
<div class="main-area"></div>

<div class="main_container">
  <div class="main-area-courses-continer">
    <div class="2">
      catfd2 data....
    </div>
  </div>
  <div class="main-area-courses-continer">
    <div class="22">
      catfd22 data....
    </div>
  </div>
  <div class="main-area-courses-continer">
    <div class="55">
      catfd55 data....
    </div>
  </div>
</div>

Answer 2

Ändern Sie einfach die Abfrage, und ich denke, das ist das Problem

$sql = 'SELECT * FROM tablename Where cat_id = '.$catcfid.' And status = '1' order by p_id ASC';