javascript - Jquery 顶级包选择器

Question

我有多个套餐可供选择。

<div class="image-grid-item" data-search="select">
<input name="pack1" type="checkbox" style="display: none;">
</div>
<div class="image-grid-item" data-search="select">
<input name="pack1" type="checkbox" style="display: none;">
</div>
<div class="image-grid-item" data-search="select">
<input name="pack2" type="checkbox" style="display: none;">
</div>
<div class="image-grid-item" data-search="select">
<input name="pack2" type="checkbox" style="display: none;">
</div>
<div class="image-grid-item" data-search="select">
<input name="pack3" type="checkbox" style="display: none;">
</div>
<div class="image-grid-item" data-search="select">
<input name="pack3" type="checkbox" style="display: none;">
</div>

同样，我有很多属于不同包裹的元素。

这是我的 jQuery

  jQuery(".image-grid-item").click(function(){
     jQuery('input', this).prop("checked", true);
     //alert("test");

     if(jQuery('input[name="pack1"]').prop("checked") == true){        
        jQuery('.package1').show();
      }
      else if(jQuery('input[name="pack2"]').prop("checked") == true){        
        jQuery('.package2').show();
      }
      else if(jQuery('input[name="pack3"]').prop("checked") == true){        
        jQuery('.package3').show();
      }

      else{
        // jQuery('input',this).prop('checked', true);

      }
  });

这是我的 div，显示了正确的包。

<div class="package1" style="display: none;">
package1
</div>
<div class="package2" style="display: none;">
package2
</div>
<div class="package3" style="display: none;">
package3
</div>

如果我选择 package1，它会显示正确的包，但是当我选择 package1 和 package3 时，它会显示这两个包，但我只想仅显示 package3。 或者当我选择 package1 和 package2 时，它只需要显示更大的包意味着 package2。

Answer 1

这是一个需要完成的非常简单的逻辑。请从这个例子中学习，并在在这里发帖之前尝试思考问题或尝试解决问题......这会大有帮助。

请参阅代码注释以了解其工作原理的说明。

//When we click on the div

$('.image-grid-item').on('click', function() {
  var selected = [];

  //Allow a package to be selected & deslected
  if ($(this).children().prop('checked') == true) {
    $(this).children().prop('checked', false)
  } else {
    $(this).children().prop('checked', true)
  }


  //For every div on the pack
  $('.image-grid-item').each(function(index, element) {

    //Check if the input inside of it is checked
    if ($(element).children().prop('checked') == true) {

      // if it is checked then store the package number in the array
      selected.push($(element).data('package'));
    }
  });


  var packageSizes = [];
  //Loop through the array of selected packages we made earlier 
  $.each(selected, function(index, value) {

    //Then loop through each package div on the page
    $('.package').each(function(index, element) {
    
      /*If the current item in the loop has the same data attribute value
      as the div we are also currently looping, then... 
      */
      if ($(element).data('package') == value) {
      
        //Store the package size in the package array
        packageSizes.push($(element).data('size'))
      }
      
      //(Or in other words, if we check a box, store the package size in an array)
    });
  })


  //Now we have the sizes of w/e packages are selected, get the largest size
  var largestPackage = Math.max.apply(Math, packageSizes);

  //Hide all packages initiallly
  $('.package').hide();
  
  //Loop through all package divs
  $('.package').each(function(index, element) {
  
    //If the package's size is equal to the largest package we selected then...
    if ($(element).data('size') == largestPackage) {
    
      //Display only that largest package
      $(element).show();
    }
  });
})

.image-grid-item {
  border: 1px solid red;
  width: 80px;
  height: 15px;
  padding: 5px;
  display: inline-block;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="image-grid-item" data-package="1" data-search="select">
  <label>size 5</label>
  <input name="pack1" type="checkbox">
</div>
<div class="image-grid-item" data-package="2" data-search="select">
  <label>size 10</label>
  <input name="pack2" type="checkbox">
</div>
<div class="image-grid-item" data-package="3" data-search="select">
  <label>size 15</label>
  <input name="pack3" type="checkbox">
</div>

<div class="package" data-package="1" data-size="5" style="display: none;">
  package1
</div>
<div class="package" data-package="2" data-size="10" style="display: none;">
  package2
</div>
<div class="package" data-package="3" data-size="15" style="display: none;">
  package3
</div>

如果您认为此答案已经解决了您的问题，请点击投票箭头旁边的复选标记按钮。如果您对此答案还有其他问题/疑问，请在下面发表评论。

还值得注意的是，这种方法可以减少并提高效率，但我发现这样的写法更容易理解并且更具可读性。

祝你编码愉快!