有没有一种简单的方法来使用jQuery显示和隐藏许多div？

debugcn 发表于 Dev

哈吉拉明

我想通过其他简单方法使用jQuery显示和隐藏div。该代码仅用于测试，并且有很多div隐藏和显示，因此当我添加所有div时，它会变得很长。

代码html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

</head>
<body>
<div class="container">

     <div class="form-group">
         <label>Categories <span class="text-hightlight">*</span></label>
         <select class="form-control" name="category_id" id="category_id">
              <option>select</option>
               <option value="1">choose1</option>
               <option value="2">choose2</option>
         </select>
        </div>

      <div class=" col-md-12" id="divt">
          <div class="form-group col-md-4">
            <label for="titre">type</label>
          </div>
          <div class="form-check form-check-inline col-md-4">
            <input type="radio" class="form-check-input" value="1" name="type" checked="checked">
            <label class="form-check-label" for="o">offer</label>
          </div>
          <div class="form-check form-check-inline col-md-4">
            <input type="radio" class="form-check-input" value="2" name="type">
            <label class="form-check-label" for="d">request</label>
          </div>
        </div>
      
    
    <div class="form-group" id="divb">
      <label>business <span class="text-hightlight">*</span></label>
      <input type="text" name="entreprise" id="entreprise" class="form-control"/>
    </div>
    
    <div class="form-group" id="divp">
     <label>Poste <span class="text-hightlight">*</span></label>
          <select class="form-control" name="poste">
              <option></option> 
              <option>Plien temps</option> 
              <option>Mi-temps</option> 
          </select>
    </div>
     
    <div class="form-group" id="divn">
      <label>Nom Piece <span class="text-hightlight">*</span></label>
      <input type="text" name="piece" class="form-control"/>
    </div>
 </div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
</body>
</html>

jQuery的

<script>
 $(document).on('change', '#category_id', function() {
      let category_id = $(this).val();
    if(category_id === "1"){
      $("#dive").hide();
      $("#divn").hide();
      $("#divt").hide();
      $("#divp").show();
      $("#divb").show();
    }else if(category_id === "2"){
      $("#dive").show();
      $("#divn").show();
      $("#divt").show();
      $("#divp").hide();
      $("#divb").hide();
    }else{
      $("#dive").show();
      $("#divn").show();
      $("#divt").show();
      $("#divp").show();
      $("#divb").show();
    }
      });
</script>

巴尔玛

您所有的DIV也都在form-group课堂上。因此，您可以先隐藏所有这些内容，然后仅显示特定于选择内容的内容。

$(document).on('change', '#category_id', function() {
  let category_id = $(this).val();
  $(".form-group").hide();
  if (category_id === "1") {
    $("#divp,#divb").show();
  } else if (category_id === "2") {
    $("#dive,#divn,#divt").show();
  } else {
    $(".form-group").show();
  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。