入力チェックボックスの結果のjQueryajaxを反転または非表示にします

Question

私はjqueryについて十分な知識がないので、コードは正常に機能していますが、問題は、チェックボックスをオフにしたときに結果を非表示にすることです（データベースから結果を取得するためにチェックします-これらの結果を非表示にするチェックボックスをオフにします）

catfd.phpコード

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

jqueryajaxコードはPHPページ '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>

そして、これはajaxjqueryコードです

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

あるdivがclass="catcfid"DOMに存在するかどうかを確認でき$(".main-area-courses-continer > ." + catcf).length == 0、長さが0そのようなdivがないことを意味する場合は、ajaxリクエストを作成して、バックエンドからそれを取得することができます。 $("." + catcf).parent().show();それ以外の場合は、elseuncheckedを使用してそのdivを表示し、$("." + catcf).parent().show();。

デモコード：

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

QUERYを変更するだけで、それが問題だと思います

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