- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在寻找一个工作示例或 fiddle ,它可以过滤价格范围以及某些属性(例如“特价”)。基本上,我想根据其价格范围过滤商品,并查看该价格范围内也在销售的产品。我的价格范围有效,但是当选中多个复选框时如何实现多个范围。另外,如何实现销售属性的过滤?
感谢任何帮助。
最佳答案
HTML 的结构和 data-*
属性的分配是草率且困惑的。使用大量的 div 会使代码难以确定目的(如果有的话)。
诸如[data-date]
之类的属性对于问题来说不是必需的(并且在实际代码中也可能不是必需的)。虽然功能正常,但属性 [min]
和 [max]
并不是复选框的标准属性,请使用 [data-min]
和 [data -max]
并确保在使用任何带有数字值的属性时将其转换为真实数字。
有关选定价格范围内的促销商品的有用性是值得怀疑的,因为促销商品无论如何都在价格范围内。如果分配了 .sale
类,则应简单地显示促销商品。详细信息在演示中注释。
// Clicking summary calls toggleFilters()
$('summary').on('click', toggleFilters);
/*
Any changes to form.filter calls filterItems()
The second parameter (event.data) indicates what is considered $(this)
*/
$('.filter').on('change', ':checkbox', filterItems);
// If details is closed, the table cells are shown and the .filter is reset
function toggleFilters(e) {
if (!!$(this).parent('details').attr('open')) {
$('tbody td').show();
$('.filter')[0].reset();
}
}
/*
//A Hide all cells in tbody
//B On each checkbox...
if it is checked and has class .priceRange...
...get its [data-min] and [data-max] into an array and add that to the ranges array
//C if it is checked and has class .saleItems sales flag is true
*/
function filterItems(e) {
let ranges = [];
let sales = false;
$('tbody td').hide(); //A
$(':checkbox').each(function() {
if (this.checked) {
if ($(this).is('.priceRange')) { //B
let min = Number($(this).data('min'));
let max = Number($(this).data('max'));
ranges.push([min, max]);
}
if ($(this).is('.saleItems')) { //C
sales = true;
}
}
});
/*
//A On each [data-price] cell...
//B Collect all [data-item] cells into an array
//C Collect all .img cells into an array
//D if [data-price] has .sale class use the [data-sale] value
//E for each sub array in the ranges array...
//F Run between() first param is price, second param is min of sub array third param
is max of sub array
//G if true then show cells [data-price], [data-item], and .img cells associated with
current index of the arrays images and items
//H if sales flag is true and current checkbox is checked and has the .saleItems class...
do the same as line G
*/
$('.products').find('[data-price]').each(function(index) {
const items = $('[data-item]').toArray();
const images = $('.img').toArray();
let price = this.matches('.sale') ?
Number($(this).data('sale')) : Number($(this).data('price'))
for (let range of ranges) {
if (between(price, range[0], range[1])) {
$(this).show();
$(images[index]).show();
$(items[index]).show();
}
}
if (sales && $(this).is('.sale')) {
$(this).show();
$(images[index]).show();
$(items[index]).show();
}
});
}
/*
Utility function that determines if a given number is in a given range
*/
function between(num, min, max) {
return num >= min && num <= max;
}
/*
Utility function that will set the images of .img cells with an array of urls
*/
function setImages(array) {
$('.img').each(function(index) {
$(this).css('background-image', `url(${array[index]})`);
});
}
/* Utility function that sets colspan values according to max number of cells in a row
*/
function tableStructure() {
let cs = [];
$('tr').each(function() {
let size = $(this).children().length;
cs.push(size);
});
let sorted = cs.sort();
$('.cs').attr('colspan', sorted[sorted.length - 1]);
$('tbody').find('tr').last().prev('tr').find('td').css('border-bottom', '0');
}
const images = ['https://www.dhresource.com/webp/m/0x0s/f2-albu-g6-M00-F1-0F-rBVaSFqzohOAJ_2FAAFgtbG9J2U328.jpg/women-new-large-size-casual-tops-loose-ladies.jpg', 'https://www.sherainbow.com/1634-large_default/pogt-casual-long-sleeve-t-shirt-women-loose-fit-wifey-print-slouchy-shirt-top-pink-cb12e6qb3bp.jpg', 'https://sc02.alicdn.com/kf/HTB1ZlLYbHsTMeJjy1zeq6AOCVXar/New-Fashion-Design-Women-plain-black-t.jpg', 'https://aritzia.scene7.com/is/image/Aritzia/large/s19_07_a06_63877_16624_on_a.jpg', 'https://cdn.forcast.com.au/media/catalog/product/cache/image/e9c3970ab036de70892d86c6d221abfe/1/8/18p928blk_18t946sto_frontfull_117_cm_2_7.jpg', 'https://image.skechers.com/img/productimages/xlarge/52675_NVOR.jpg', 'https://static.enko-running-shoes.com/2019/img/v5/chaussure-running-enko.jpg'];
tableStructure();
setImages(images);
.products {
table-layout: fixed;
}
caption,
th {
text-align: left;
font-size: 1.15rem;
}
caption {
font-size: 1.5rem;
font-weight: 700
}
td {
border-bottom: 3px ridge grey;
}
tbody td {
padding-bottom: 5px
}
.dept tr:first-of-type>th::before {
content: attr(data-dept);
font-size: 1.25rem
}
.category th::before {
content: attr(data-cat)
}
.item>td::before {
content: attr(data-item);
font-size: 1.2rem
}
.price>td::before {
content: '$'attr(data-price)
}
.price>td::after {
content: '\a0'
}
.price>td.sale::before {
content: '$'attr(data-price);
text-decoration: line-through red
}
.price>td.sale::after {
content: '$'attr(data-sale);
color: green
}
.img {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-width: 100px;
min-height: 100px;
}
label {
display: inline-block;
width: 150px;
margin: 0 5px;
border-bottom: 1px solid black;
}
details {
cursor: pointer
}
tbody tr:last-of-type td {
border-bottom: 0;
}
summary {
font-size: 1.25rem;
border-top: 3px ridge grey
}
<table class="products">
<caption>Shop</caption>
<tbody class='dept'>
<tr>
<th class='cs' data-dept='Apparel'></th>
</tr>
<tr class='category'>
<th class='cs' data-cat='Shirts'></th>
</tr>
<tr class='item'>
<td data-item='item 1'></td>
<td class='img' rowspan='2'></td>
<td data-item='item 2'></td>
<td class='img' rowspan='2'></td>
<td data-item='item 3'></td>
<td class='img' rowspan='2'></td>
</tr>
<tr class='price'>
<td data-price='9.99'><br></td>
<td data-price='23.99'><br></td>
<td class='sale' data-price='32.99' data-sale='17.99'><br></td>
</tr>
<tr class='category'>
<th class='cs' data-cat='Pants'></th>
</tr>
<tr class='item'>
<td data-item='item 4'></td>
<td class='img' rowspan='2'></td>
<td data-item='item 5'></td>
<td class='img' rowspan='2'></td>
</tr>
<tr class='price'>
<td class='sale' data-price='39.99' data-sale='12.99'><br></td>
<td data-price='75.99'><br></td>
</tr>
<tr class='category'>
<th class='cs' data-cat='Shoes'></th>
</tr>
<tr class='item'>
<td data-item='item 6'></td>
<td class='img' rowspan='2'></td>
<td data-item='item 7'></td>
<td class='img' rowspan='2'></td>
</tr>
<tr class='price'>
<td data-price='39.99'><br></td>
<td class='sale' data-price='125.99' data-sale='77.99'><br></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class='cs'>
<form class='filter'>
<details>
<summary>Filters</summary>
<label><input class="priceRange" data-min='0' data-max='9.99' type="checkbox" value='true'>Under $10</label>
<label><input class="priceRange" data-min='10' data-max='19.99' type="checkbox">$10 to $20</label>
<label><input class="priceRange" data-min='20' data-max='29.99' type="checkbox">$20 to $30</label>
<label><input class="priceRange" data-min='30' data-max='39.99' type="checkbox">$30 to $40</label>
<label><input class="priceRange" data-min='40' data-max='999' type="checkbox">Over $40</label>
<label><input class="saleItems" type="checkbox" value='true'>On Sale</label>
</details>
</form>
</td>
</tr>
</tfoot>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
关于javascript - 使用不同价格范围和一种属性进行过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57061363/
我需要一些帮助。 我希望“总计”由“数量*价格=总计”计算(到目前为止没问题)。问题是我还需要通过“总/价格=数量”来计算“数量”,即如果一个字段发生更改,另一个字段也会自动更改。 我做了一个非常简单
我试图将每件商品的数量和价格相乘来计算总数,但我的警报中出现错误。 $.each(data.items, function(index, d){ var calcultest = d.pric
我想获得格式化的价格但没有货币符号,我只想使用 magento 的标准功能! $product->getFinalPrice(); => 19.9900 Mage::helper('core')->f
我正在尝试获取特定月份和年份中所有父类别的总价格。父类别是 parent_id == 0 的任何类别。我的查询如下所示: SELECT ROUND(SUM(od.total_price)) a
请帮我摆脱我的头痛..提前我为我的糟糕语言道歉,无论是英语还是mysql。希望有人能理解这个问题..:) 我有一个数据库,任何人都可以记录各个商店中各种产品的价格。以下查询是一个半理论示例,可能根本不
下面是我需要在数据库中设计的示例: 会有一个价格选项,如果有的话,会有一个特价选项,然后我想知道如果我希望其中一个选项是“免费”的,我该怎么做。 另请参阅根据所在国家/地区会有不同的货币。这是我的想法
商品价格格式 999,99 999 - 1 ..4 digits , - comma sign marks decimal point 99 - 2 digits after price Postg
我有这个表 stk +---------+--------------+ | Field | Type | +---------+--------------+ | id
是否有一个简单的格式化程序可以将我的字符串格式化为价格? 所以我的字符串是:300000 我想用空格来“300 000” or 1000000 "1 000 000" 张国荣 最佳答案 这样做: St
我想知道是否可以使用不依赖于 Excel 应用程序本地化(欧盟/美国)的 Excel 公式来自定义数字格式? 例如,我的值为 1291660。 然后使用公式=TEXT(A1;"# ##0,00") .
这是我的代码,对于价格 slider : $("#price-slider").ionRangeSlider({ min: 130, max: 575, onChange :
用户可以使用价格创建一个新实体。价格可以使用不同的货币(EUR,USD ...),因此我们可以乘以(price * convert_rate)得到实际价格。 我想做的是根据价格过滤记录,具体取决于前端
我正在尝试隐藏小数位在类型输入字段上,例如 数字从0.00开始 因此,输入字段中的第一个位置将为 0.00 我输入的1比它应该变成0.01 我输入的2比它应该变成0.12 比 0 所以它应该变成 1.
$res=mysql_query($qry); while($row= mysql_fetch_array($res)) { echo "".$row['Food_Name']." ".$row['P
我们正在为我们的新项目寻找信用卡网关。那里一片困惑,所有人都想把你切成碎片。每次我与他们交谈时,他们都有不同的费率,每次更新报价时,他们都会更改一些价格。 我们正在使用 .net、C#、asp.net
我已经创建了一个 jQuery 价格 slider ,但我不确定如何让过滤区域以实际价格范围开始?目前它有“$[object Object] - $[object Object]”,而我希望它有“$2
我已经创建了 jquery 价格 slider ,但我不确定如何过滤我的结果,以便在滑动时您只能看到具有该值范围内的产品。 HTML: Price range:
我有一个页面,其中有一个表格,我们可以在其中选择一个产品,输入它的数量和价格,然后应在最后一列中计算金额,并应添加新行以输入更多产品,直到我们完成为止。
我创建了电子商务网站,即将提供午餐和晚餐服务。我在这里提出问题/问题是因为我知道这里有很多可以帮助我的传奇人物。我在网站上添加了套餐/计划部分。 1. Weekly 2. Monthly 以下是订
我的网站需要一个简单的 jQuery 价格 slider 。从 0 英镑到 1000 英镑不等。 假设浏览器将 slider 设置为 100 英镑(例如),然后我需要一个立即购买按钮,该按钮将 sli
我是一名优秀的程序员,十分优秀!