如何使用Bootstrap和jQuery显示/隐藏div元素取决于多个值？

Bootstrap和jQuery一起用于开发交互式Web应用程序。 Bootstrap和jQuery都是免费和开源的，这使其在开发人员中很受欢迎。本文在Bootstrap和jQuery的帮助下，根据用户输入来显示和隐藏分区。下面显示了两种建立相同方法的方法。

第一种方法：在第一种方法中，一次只能看到一个分区，具体取决于用户的输入。此方法包括一个带有三个选项的下拉列表。用户可以一次选择一个选项，并根据选项的值显示相应的划分。代码段中使用的方法如下：

• $(document).ready(函数)：加载文档并执行作为参数传递的函数时，将触发ready事件。
• $(selector).change(函数)：更改选定元素(输入，文本区域或select)并执行作为参数传递的函数时，将触发change事件。当用户从下拉菜单中选择一个选项时，将调用作为参数传递的函数。
• $(selector).find(filter)：此方法返回所选元素的所有后代元素。这里的是的后代。而且，该方法需要过滤器以返回所需的元素。这里选择的选项是过滤器，即返回用户选择的选项。
  $(selector).each(函数)：此方法执行了每个匹配元素作为参数传递的函数。在这里，作为参数传递的函数对find()方法返回的每个元素执行。
  $(selector).attr(attribute)：此方法分别设置或返回所选元素的属性和值。此处，所选选项的值被提取到optionValue变量中。
  $(selector).not(criteria)：此方法返回与指定条件不匹配的元素。在这里，not方法返回用户未选择的选项。
  $(selector).hide()：此方法隐藏选定的元素。
  $(selector).show()：此方法显示选定的元素。

  说明：该页面显示一个下拉菜单，用户可以从中选择一个选项。

  元素中发生更改时，将立即触发change()方法，该方法又调用find函数并返回selected选项。 attr()方法将选项的值提取到optionValue变量中。 optionValue变量附加“。”。 (将其变成定义的除法类中的一种)在not()方法中。 not()方法隐藏与条件中提到的类不匹配的所有类。 show()方法最终显示用户选择的分区。如果用户未选择任何选项，则所有分区都将被隐藏。

  html

    
  
      
      Show Hide Elements Using Dropdown
    
      
      
          .box {
              color: #fff;
              padding: 20px;
              display: none;
              margin-top: 20px;
          }
    
          .red {
              background: red;
          }
    
          .green {
              background: green;
          }
    
          .blue {
              background: blue;
          }
      
      
      
      
    
      
          // jQuery functions to hide and show the div
          $(document).ready(function () {
              $("select").change(function () {
                  $(this).find("option:selected")
                         .each(function () {
                      var optionValue = $(this).attr("value");
                      if (optionValue) {
                          $(".box").not("." + optionValue).hide();
                          $("." + optionValue).show();
                      } else {
                          $(".box").hide();
                      }
                  });
              }).change();
          });
      
  
    
  
      
          
          
              Choose Color
              Red
              Green
              Blue
          
      
      
      Red Selected
      Green Selected
      Blue Selected
  
    

  输出：

  

  

  第二种方法：这种方法演示了如何同时显示一个或多个分区。此方法利用复选框来接受用户输入。由于复选框一次可以获取多个值，因此它是实现我们的目标的理想选择。代码中使用了以下方法：

  • $(document).ready(函数)：加载文档并执行作为参数传递的函数时，将触发ready事件。
  • $(selector).click(函数)：此方法在发生click事件时触发click事件或执行一个函数。在此，当用户选中复选框时，将触发click事件，并执行作为参数传递的函数。
  • $(selector).attr(attribute)：此方法返回所选元素的值。此处，所选选项的值被提取到inputValue变量中。
  • $(selector).toggle()：此方法在所选元素的hide()方法和show()方法之间切换。如果选中此框，则会显示分度。如果未选中该框，则隐藏该部门。

  说明：该网页包含某些复选框。用户可以一次选择一个或多个复选框。如果复选框最初是隐藏的，则会显示与复选框相对应的分区。如果未选中复选框，则对应的分区将被隐藏。

  html

    
  
      
      Show Hide Elements Using Checkboxes
    
      
      
          .box {
              color: #fff;
              padding: 20px;
              display: none;
              margin-top: 20px;
          }
    
          .red {
              background: red;
          }
    
          .green {
              background: green;
          }
    
          .blue {
              background: blue;
          }
    
          label {
              margin-right: 15px;
          }
      
    
      
      
      
    
      
    
          // jQuery functions to show and hide divisions
          $(document).ready(function () {
              $('input[type="checkbox"]').click(function () {
                  var inputValue = $(this).attr("value");
                  $("." + inputValue).toggle();
              });
          });
      
  
    
  
    
      
          
          
              red
          
    
           
              green
          
    
           
              blue
          
      
    
      
      Red Selected
      Green Selected
      Blue Selected
  
    

  输出