基于表单序列化和多个数据属性的jQuery过滤器



我正试图了解如何创建一个函数,使我能够根据序列化的表单数据和每个报价的数据属性过滤报价列表。

这是我的例子,但我只是不能想出一种方法来条件多个数据属性在我的filterOffers()函数。如果有人能帮助我走在正确的方向上,我将不胜感激。

这里的关键是可以有许多不同的复选框和选项以及许多不同的数据属性,这就是为什么我试图找到一种方法来过滤多个数据属性。

JavaScript

$(function(){                                                
$('form').submit(function(e){

e.preventDefault();                    
var formData = $(this).serializeArray();
filterOffers(formData);
});

});

function filterOffers(attributes){                
$(".offer").hide().filter(function(i) {

// How to filter the list based on given options and data attributes?

// If I reach this point then the offer is shown.
return true;
}).show();
}

<form>
<input type="checkbox" name="monthly" /> Paid monthly
<input type="checkbox" name="unlimited" /> Unlimited data
<input type="submit" />
</form>
<div class="offer" data-monthly="true" data-unlimited="false">Offer 1</div>
<div class="offer" data-monthly="true" data-unlimited="true">Offer 2</div>
<div class="offer" data-monthly="true" data-unlimited="true">Offer 3</div>

试试这个:

$('form').submit(function (e) {
e.preventDefault();
var formData = new FormData(this);
filterOffers(formData.getAll('p[]'));
});

function filterOffers(attributes) {
$(".offer").hide();
for (let i = 0; i < attributes.length; i++) {
const attribute = attributes[i];
$(".offer[data-"+ attribute+"=true]").show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="p[]" value="unlimited" /> Unlimited data
<input type="checkbox" name="p[]" value="monthly" /> Paid monthly

<input type="submit" />
</form>
<div class="offer" data-monthly="true" data-unlimited="false">Offer 1</div>
<div class="offer" data-monthly="true" data-unlimited="true">Offer 2</div>
<div class="offer" data-monthly="true" data-unlimited="true">Offer 3</div>

相关内容

  • 没有找到相关文章

最新更新