在页面问题上过滤 HTML 元素
filtering of html elements on page issue
我创建了一个可以工作的javascript过滤器,但并非一直有效。 要首先查看此操作,请访问以下链接。在左侧,单击"品牌模型"下的普利司通e6链接。 它不返回任何内容,但实际上它应该在视图中返回 3 个产品。
筛选器的工作方式如下。我抓取在侧边栏上单击的项目的值,然后在主视图中搜索 html 元素以查看是否有任何匹配项。如果有,我只在视图中显示这些产品,并隐藏其余产品。
处理这个问题的 JavaScript 是(你也可以在这里看到它(:
是我的 JS 中的一些空格问题还是不正确的问题? 我试图使用 jQuery 修剪函数无济于事。
javascript:
var noProductMatches = jQuery('.no-products-found');
jQuery('#filter-by-brand li a').click(function()
{
noProductMatches.hide();
var brandNameSelected = jQuery(this).html();
var productVendorFromCollection = jQuery("#product-vendor");
var productContainer = jQuery('#product-collection .productBoxWrapper');
if (brandNameSelected == 'All Brands' )
{
productContainer.fadeIn("slow");
}
else
{
var results = jQuery(".productBoxWrapper")
.fadeOut(100)
.delay(100)
.filter(function()
{
return jQuery(this).html().indexOf(brandNameSelected) > -1 || jQuery(this).html().indexOf(productVendorFromCollection) > -1;
})
.each(function(index, item)
{
jQuery(item).fadeIn("slow");
});
if (results.length == 0)
{
noProductMatches.fadeIn();
}
}
});
jQuery('#filter-by-model li a').click(function()
{
noProductMatches.hide();
var brandNameSelected = jQuery.trim(jQuery(this).html());
var productContainer = jQuery('#product-collection .productBoxWrapper');
if (brandNameSelected == 'Any Model' )
{
productContainer.fadeIn("slow");
}
else
{
var results = productContainer
.fadeOut(100)
.delay(100)
.filter(function()
{
return jQuery.trim(jQuery(this).html()).indexOf(brandNameSelected) > -1;
})
.each(function(index, item)
{
jQuery(item).fadeIn("slow");
});
if (results.length == 0)
{
noProductMatches.fadeIn();
}
}
});
jQuery('#filter-by-price li a').click(function()
{
noProductMatches.hide();
var priceRangeSelectedItem = jQuery(this).html();
var minSelectedPrice = parseInt( jQuery(this).attr("name") );
var maxSelectedPrice = parseInt( jQuery(this).attr("title") );
var productContainer = jQuery('#product-collection .productBoxWrapper');
if (priceRangeSelectedItem == 'Any Price')
{
productContainer.fadeIn("slow");
}
else
{
var results = jQuery(".productBoxWrapper")
.fadeOut(100)
.delay(100)
.filter(function()
{
var minProductPrice = parseInt( jQuery(this).find("#lowestPriceRange").html() );
var maxProductPrice = parseInt( jQuery(this).find("#highestPriceRange").html() );
//alert(minProductPrice);
//alert(maxProductPrice);
return (minProductPrice >= minSelectedPrice && maxProductPrice <= maxSelectedPrice);
})
.each(function(index, item)
{
jQuery(item).fadeIn("slow");
});
if (results.length == 0)
{
noProductMatches.fadeIn();
}
}
});
问题是它是混合情况。在菜单中,它说普利司通e6,但在页面上它说普利司通E6,大写E.要么当你搜索我们的时,你必须把所有东西都变成小写,确保它们在菜单和页面上是相等的。
相关文章:
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- 在AngularJS中过滤-html标签中的文本
- 如何过滤页面源以获得纯HTML-无内容(仅标记)
- 使用AngularJS从JSON对象中过滤HTML
- 当我附加XSS过滤后的html时,它会打印原始html
- Javascript 使用表格 td 的宽度过滤 HTML 内容
- 如何根据 css 属性值过滤 HTML 元素
- 在页面问题上过滤 HTML 元素
- 使用 jQuery 轻松过滤 HTML 部门
- 使用 JavaScript 动态过滤 HTML 表的行
- 需要帮助用javascript过滤HTML表
- 使用angular.forEach函数过滤HTML表以替换许多if/else语句
- 使用jquery过滤HTML表数据
- 使用Javascript过滤HTML字符串,如果字符串包含word
- Javascript使用单选按钮过滤html元素的可见性
- 使用JavaScript过滤HTML表-无插件
- PHP / Jquery中的Json响应过滤HTML
- Jquery/javascript,从ajax响应中过滤html对象
- 下拉框过滤HTML中的元素
- 如何自动过滤 HTML 选择列表