Jquery Top Package Selector

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，它显示右侧的包，但当我选择package 1和package 3时，它显示两个包，但我只想显示package 3。或者当我选择package1和package2时，它只需要显示更大的package意味着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>

如果您觉得这个答案解决了您的问题，请点击投票箭头旁边的复选标记按钮。如果您对此答案有进一步的问题/疑问，请在下面发表评论。

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

编码快乐！