如何使用 Bootstrap 和 jQuery 根据多个值显示/隐藏 div 元素？

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

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

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

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

  元素发生更改，就会触发 change() 方法，该方法依次调用 find函数并返回选定的选项。 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(函数)：这个方法在点击事件发生时触发点击事件或执行一个函数。在这里，当用户选中复选框时，将触发单击事件并执行作为参数传递的函数。
  • $(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
  
    

  输出

  

  

  jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
  您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。