使用下拉列表过滤价格范围

Question

我的某些代码有问题。 我试图创建一个具有几个选项的下拉过滤器必须基于某个价格范围。 我找不到合适的方法将 2 个值添加到价格范围下拉列表中，并使其也以其他方式过滤。 代码笔链接

//what i have tried
if (prices.indexOf("<option value='" + price + "'>" + price + '</option>') == -1) {
prices += "<option value='" + price + "'>" + price + '</option>'
}

请帮忙，谢谢

Answer 1

我找不到合适的方法将 2 个值添加到价格范围下拉列表中

发生此问题的原因是您尚未将生成的 HTML 字符串添加到 DOM 的price。要修复它，您只需要执行以下操作：

$('.filter-price').append(prices)

并使其也以其他方式过滤。

现在，这里的问题是对于您设置data-price属性值的productdiv，例如：

rawPrice = price.replace('$', ''),
rawPrice = parseInt(rawPrice.replace(',', '')),
....
"' data-price='" + rawPrice

所以，你可以理解这里的data-price实际上喜欢3000而不是$3,000。但是在过滤器中，您只需执行以下操作：

filters += '[data-' + key + "='" + filtersObject[key] + "']"

因此过滤器不适用于价格范围，因为3000不等于$3,000。要解决此问题，您只需将filtersObject[key]转换为相同的格式，但仅适用于price键，如下所示：

for (var key in filtersObject) {
if (filtersObject.hasOwnProperty(key)) {
if (key === 'price') {
var rawPrice = filtersObject[key].replace('$', '').replace(',', '')
filters += '[data-' + key + "='" + rawPrice + "']"
} else {
filters += '[data-' + key + "='" + filtersObject[key] + "']"
}
}
}

工作演示：

var data = [{
make: 'Gibson',
model: 'Les Paul',
type: 'Electric',
price: '$3,000',
image: 'http://www.sweetwater.com/images/items/120/LPST5HTHDCH-medium.jpg?9782bd'
},
{
make: 'Gibson',
model: 'SG',
type: 'Electric',
price: '$1,500',
image: 'http://www.sweetwater.com/images/items/120/SGSEBCH-medium.jpg?e69cfe'
},
{
make: 'Fender',
model: 'Telecaster',
type: 'Electric',
price: '$2,000',
image: 'http://www.sweetwater.com/images/items/120/TelePLMPHB-medium.jpg?28e48b'
}
]
var products = '',
makes = '',
models = '',
types = '',
prices = ''
for (var i = 0; i < data.length; i++) {
var make = data[i].make,
model = data[i].model,
type = data[i].type,
price = data[i].price,
rawPrice = price.replace('$', ''),
rawPrice = parseInt(rawPrice.replace(',', '')),
image = data[i].image
//create product cards
products +=
"<div class='col-sm-4 product' data-make='" +
make +
"' data-model='" +
model +
"' data-type='" +
type +
"' data-price='" +
rawPrice +
"'><div class='product-inner text-center'><img src='" +
image +
"'><br />Make: " +
make +
'<br />Model: ' +
model +
'<br />Type: ' +
type +
'<br />Price: ' +
price +
'</div></div>'
//create dropdown of makes
if (makes.indexOf("<option value='" + make + "'>" + make + '</option>') == -1) {
makes += "<option value='" + make + "'>" + make + '</option>'
}
//create dropdown of models
if (models.indexOf("<option value='" + model + "'>" + model + '</option>') == -1) {
models += "<option value='" + model + "'>" + model + '</option>'
}
//create dropdown of types
if (types.indexOf("<option value='" + type + "'>" + type + '</option>') == -1) {
types += "<option value='" + type + "'>" + type + '</option>'
}
//create dropdown of prices
if (prices.indexOf("<option value='" + price + "'>" + price + '</option>') == -1) {
prices += "<option value='" + price + "'>" + price + '</option>'
}
}
$('#products').html(products)
$('.filter-make').append(makes)
$('.filter-model').append(models)
$('.filter-type').append(types)
$('.filter-price').append(prices)
var filtersObject = {}
//on filter change
$('.filter').on('change', function() {
var filterName = $(this).data('filter'),
filterVal = $(this).val()
if (filterVal == '') {
delete filtersObject[filterName]
} else {
filtersObject[filterName] = filterVal
}
var filters = ''
for (var key in filtersObject) {
if (filtersObject.hasOwnProperty(key)) {
if (key === 'price') {
var rawPrice = filtersObject[key].replace('$', '').replace(',', '')
filters += '[data-' + key + "='" + rawPrice + "']"
} else {
filters += '[data-' + key + "='" + filtersObject[key] + "']"
}
}
}
if (filters == '') {
$('.product').show()
} else {
$('.product').hide()
$('.product').hide().filter(filters).show()
}
})
//on search form submit
$('#search-form').submit(function(e) {
e.preventDefault()
var query = $('#search-form input').val().toLowerCase()
$('.product').hide()
$('.product').each(function() {
var make = $(this).data('make').toLowerCase(),
model = $(this).data('model').toLowerCase(),
type = $(this).data('type').toLowerCase()
if (make.indexOf(query) > -1 || model.indexOf(query) > -1 || type.indexOf(query) > -1) {
$(this).show()
}
})
})

body {
padding-top: 0px !important;
}
.product {
margin-bottom: 30px;
}
.product-inner {
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
padding: 10%;
}
.product img {
margin-bottom: 10px;
}
/* navbar */
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: black;
color: black !important;
}
a {
color: #000;
}
ul {
color: #000 !important;
}
/* header */
.logo {
padding-bottom: 0 !important;
margin: auto !important;
font-family: 'Lalezar', cursive;
color: #000;
}
.menu-icon {
margin-bottom: 0 !important;
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.orange {
color: #e1a917 !important;
}
.blu {
color: rgb(49, 48, 48);
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
/* hero */
.hero {
/* background: linear-gradient(#0006, #0006), url(https://www.w3schools.com/w3images/architect.jpg); */
/*   background-image: url(https://source.unsplash.com/2600x1200?city); */
background-color: rgb(49, 49, 49);
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
height: 70vh;
/*   background-color: #eee; */
display: flex;
justify-content: center;
align-items: center;
}
.hero-inner {
text-align: center;
padding: 0 1.5rem;
}
.hero-headline {
margin: 0;
color: #fff;
font-weight: 400;
}
h2 {
margin: 0;
color: #fff;
font-weight: 400;
font-size: 1.2rem;
}
/* cards */
body {}
.prov {
text-decoration: none !important;
color: rgb(49, 49, 49) !important;
}
.now {
zoom: 75%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 4em;
align-items: stretch;
}
.grid>article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid>article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
.container {
padding: 5em;
width: auto !important;
margin-bottom: 0;
padding-bottom: 1em;
}
.blue {
padding: 0;
}
.ho {
margin: 0 !important;
margin: 0em;
}
.sm {
font-size: x-large;
}
/* agents */
/* .moo {
	margin-top: 2em;
} */
.moos {
text-decoration: none;
font-family: 'Balsamiq Sans', cursive;
}
strong {
border: 1px solid black;
padding-left: 1em;
padding-right: 1em;
/* border-bottom: none; */
border-right: none;
border-left: none;
}
* {
box-sizing: border-box;
}
article {
color: #f4f4f4;
background-color: rgb(49, 49, 49);
zoom: 80%;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
/* footer */
body {
background: #fbfbfd;
}
.new_footer_area {
background: #fbfbfd;
}
.new_footer_top {
padding: 0px 0px 270px;
position: relative;
overflow-x: hidden;
}
.new_footer_area .footer_bottom {
padding-top: 5px;
padding-bottom: 50px;
}
.footer_bottom {
font-size: 14px;
font-weight: 300;
line-height: 20px;
color: #7f88a6;
padding: 27px 0px;
}
.new_footer_top .company_widget p {
font-size: 16px;
font-weight: 300;
line-height: 28px;
color: #6a7695;
margin-bottom: 20px;
}
.new_footer_top .company_widget .f_subscribe_two .btn_get {
border-width: 1px;
margin-top: 20px;
}
.btn_get_two:hover {
background: transparent;
color: #5e2ced;
}
.btn_get:hover {
color: #fff;
background: #6754e2;
border-color: #6754e2;
-webkit-box-shadow: none;
box-shadow: none;
}
a:hover,
a:focus,
.btn:hover,
.btn:focus,
button:hover,
button:focus {
text-decoration: none;
outline: none;
}
.new_footer_top .f_widget.about-widget .f_list li a:hover {
color: #5e2ced;
}
.new_footer_top .f_widget.about-widget .f_list li {
margin-bottom: 11px;
}
.f_widget.about-widget .f_list li:last-child {
margin-bottom: 0px;
}
.f_widget.about-widget .f_list li {
margin-bottom: 15px;
}
.f_widget.about-widget .f_list {
margin-bottom: 0px;
}
.new_footer_top .f_social_icon a {
width: 44px;
height: 44px;
line-height: 43px;
background: transparent;
border: 1px solid #e2e2eb;
font-size: 24px;
}
.f_social_icon a {
width: 46px;
height: 46px;
border-radius: 50%;
font-size: 14px;
line-height: 45px;
color: #858da8;
display: inline-block;
background: #ebeef5;
text-align: center;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.ti-facebook:before {
content: "e741";
}
.ti-twitter-alt:before {
content: "e74b";
}
.ti-vimeo-alt:before {
content: "e74a";
}
.ti-pinterest:before {
content: "e731";
}
.btn_get_two {
-webkit-box-shadow: none;
box-shadow: none;
background: #5e2ced;
border-color: #5e2ced;
color: #fff;
}
.btn_get_two:hover {
background: transparent;
color: #5e2ced;
}
.new_footer_top .f_social_icon a:hover {
background: #5e2ced;
border-color: #5e2ced;
color: white;
}
.new_footer_top .f_social_icon a+a {
margin-left: 4px;
}
.new_footer_top .f-title {
margin-bottom: 30px;
color: #263b5e;
}
.f_600 {
font-weight: 600;
}
.f_size_18 {
font-size: 18px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #4b505e;
}
.new_footer_top .f_widget.about-widget .f_list li a {
color: #6a7695;
}
.new_footer_top .footer_bg {
position: absolute;
bottom: 0;
background: url("http://droitthemes.com/html/saasland/img/seo/footer_bg.png") no-repeat scroll center 0;
width: 100%;
height: 266px;
}
.new_footer_top .footer_bg .footer_bg_one {
background: url("https://1.bp.blogspot.com/-mvKUJFGEc-k/XclCOUSvCnI/AAAAAAAAUAE/jnBSf6Fe5_8tjjlKrunLBXwceSNvPcp3wCLcBGAsYHQ/s1600/volks.gif") no-repeat center center;
width: 330px;
height: 105px;
background-size: 100%;
position: absolute;
bottom: 0;
left: 30%;
-webkit-animation: myfirst 22s linear infinite;
animation: myfirst 22s linear infinite;
}
.new_footer_top .footer_bg .footer_bg_two {
background: url("https://1.bp.blogspot.com/-hjgfxUW1o1g/Xck--XOdlxI/AAAAAAAAT_4/JWYFJl83usgRFMvRfoKkSDGd--_Sv04UQCLcBGAsYHQ/s1600/cyclist.gif") no-repeat center center;
width: 88px;
height: 100px;
background-size: 100%;
bottom: 0;
left: 38%;
position: absolute;
-webkit-animation: myfirst 30s linear infinite;
animation: myfirst 30s linear infinite;
}
@-moz-keyframes myfirst {
0% {
left: -25%;
}
100% {
left: 100%;
}
}
@-webkit-keyframes myfirst {
0% {
left: -25%;
}
100% {
left: 100%;
}
}
@keyframes myfirst {
0% {
left: -25%;
}
100% {
left: 100%;
}
}
/*************footer End*****************/
$BorderColor: #cccccc !global;
.container {
margin-top: 30px;
margin-bottom: 30px;
}
.list {
list-style-type: none;
padding: 0;
margin: 0;
}
.list--list-item {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid $BorderColor;
&:last-child {
border-bottom: 0;
margin: 0;
}
}
.no-result {
display: none;
}
.down {
margin: 3%;
background-color: #e1a917 !important;
color: rgb(245, 236, 236) !important;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.down {
margin: 2%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.down {
margin: 1% 1% 3% 1%;
}
}
.up {
width: 35vw;
background-color: #e1a917 !important;
color: rgb(245, 236, 236) !important;
border: none !important;
}
@media screen and (max-width: 992px) {
@media screen and (max-width: 992px) {
.up {
width: 75vw;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.up {
width: 87vw;
}
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.down {
margin: 1%;
}
}
.block {
background-color: #e1a917 !important;
border: none !important;
}
.product {
margin-bottom: 30px;
}
.product-inner {
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
padding: 10px;
}
.product img {
margin-bottom: 10px;
}
.wou {
width: 1000px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lalezar&display=swap" rel="stylesheet">
<link rel="stylesheet" href="buy.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="https://themify.me/wp-content/themes/themify-v32/themify-icons/themify-icons.css">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://entrusters.com/modules/mod_entrusters_shopbyurl/css/urldata.previewer.min.csshttps://entrusters.com/modules/mod_entrusters_shopbyurl/css/urldata.previewer.min.css">
<link rel="stylesheet" href="https://entrusters.com/templates/yoo_moustache/css/theme.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Buy</li>
</ol>
</nav>
<div class="row" id="search">
<form id="search-form" action="" method="POST" enctype="multipart/form-data">
<div class="form-group col-xs-9">
<input class="form-control" type="text" placeholder="Search" />
</div>
<div class="form-group col-xs-3">
<button type="submit" class="btn btn-block btn-primary" style="padding-right: 4em;">Search</button>
</div>
</form>
</div>
<div class="row" id="filter">
<form>
<div class="form-group col-sm-3 col-xs-6">
<select data-filter="make" class="filter-make filter form-control">
<option value="">Select Make</option>
<option value="">Show All</option>
</select>
</div>
<div class="form-group col-sm-3 col-xs-6">
<select data-filter="model" class="filter-model filter form-control">
<option value="">Select Model</option>
<option value="">Show All</option>
</select>
</div>
<div class="form-group col-sm-3 col-xs-6">
<select data-filter="type" class="filter-type filter form-control">
<option value="">Select Type</option>
<option value="">Show All</option>
</select>
</div>
<div class="form-group col-sm-3 col-xs-6">
<select data-filter="price" class="filter-price filter form-control">
<option value="">Select Price Range</option>
<option value="">Show All</option>
</select>
</div>
</form>
</div>
<div class="row" id="products">
</div>
</div>