【发布时间】：2014-09-11 22:31:24
【问题描述】：
我使用了earlier post，并成功地将其实现为带有过滤功能的二维产品查看器。
我非常感谢开发和共享此代码的人们。
我希望从产品中单击返回时可以保留选择吗？当复选框被选中时，也许可以将选择显示为 URL 中的变量，这样您就可以点击返回到相同的选择？
另一件事，我尝试添加一系列单选按钮，这与实际的复选框或 jQuery 无关，但由于某种原因，当单击单选按钮时 jQuery 会对单选按钮做出反应。有没有办法“禁用”这个？即使未触及单选按钮，当使用现有复选框进行过滤时，它也会在本应显示所有内容时隐藏所有内容，从而导致行为错误。
<div class="flowers-wrap">
<p style="font-size:12px;"><strong>Filter flowers by colour:</strong>
</p>
<form>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="1" />Kartofler</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="2" />Gulerødder</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="3" />Løg</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="4" />Agurker</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="5" />Peber</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="6" />Rødbeder</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="7" />Selleri</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="8" />Andre</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="9" />Salat</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" id="12" />Emballage</label>
<br>
</form>
<p style="font-size:12px;"><strong>Filter flowers by size:</strong>
</p>
<form>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t10" />Frasortering - sten/grus</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t11" />Vaske</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t12" />Polere</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t13" />Tørre</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t14" />Sortering</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t15" />Skrælle</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t16" />Skære</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t17" />Transport</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t18" />Veje/tælle</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t19" />Pakke/fylde</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t21" />Storkøkken</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" id="t22" />Palletering</label>
<br>
</form>
</div>
<div class="flowers">
<div class="flower" data-id="3-Dimensionel skiveskærermaskine" data-category="8 5 3 2 1 t16 ">3-Dimensionel skiveskærermaskine</div>
<div class="flower" data-id="3D-skærer til Sticks og tern" data-category="9 8 7 6 5 4 3 2 1 t16 ">3D-skærer til Sticks og tern</div>
<div class="flower" data-id="Automatisk gulerodsskærer og slicer" data-category="2 t16 ">Automatisk gulerodsskærer og slicer</div>
<div class="flower" data-id="Automatisk gulerodsskærer og slicer" data-category="2 t16 ">Automatisk gulerodsskærer og slicer</div>
<div class="flower" data-id="Automatisk kassefylder" data-category="9 8 7 6 5 4 3 2 1 t17 t19 ">Automatisk kassefylder</div>
<div class="flower" data-id="Automatisk løgskræller USM-100A" data-category="3 t15 ">Automatisk løgskræller USM-100A</div>
<div class="flower" data-id="Automatisk Pallelaster" data-category="12 t22 ">Automatisk Pallelaster</div>
<div class="flower" data-id="Automatisk strapmaskine incl. påsætning af hjørnebeskytter" data-category="12 t22 ">Automatisk strapmaskine incl. påsætning af hjørnebeskytter</div>
<div class="flower" data-id="Automatisk Vejemaskine" data-category="3 1 t18 ">Automatisk Vejemaskine</div>
<div class="flower" data-id="Basisenhed for manuel udskæring" data-category="9 8 7 6 5 4 3 2 1 t16 ">Basisenhed</div>
</div>
Javascript：
var byProperty = [],
byColor = [];
$("input[name=fl-colour]").on("change", function () {
if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-size]").on("change", function () {
if (this.checked) byColor.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byColor, "[data-category~='" + $(this).attr("value") + "']");
});
$("input").on("change", function () {
var str = "Include items \n";
var selector = '',
cselector = '',
nselector = '';
var $lis = $('.flowers > div'),
$checked = $('input:checked');
if ($checked.length) {
if (byProperty.length) {
if (str == "Include items \n") {
str += " " + "with (" + byProperty.join(',') + ")\n";
$($('input[name=fl-colour]:checked')).each(function (index, byProperty) {
if (selector === '') {
selector += "[data-category~='" + byProperty.id + "']";
} else {
selector += ",[data-category~='" + byProperty.id + "']";
}
});
} else {
str += " AND " + "with (" + byProperty.join(' OR ') + ")\n";
$($('input[name=fl-size]:checked')).each(function (index, byProperty) {
selector += "[data-category~='" + byProperty.id + "']";
});
}
}
if (byColor.length) {
if (str == "Include items \n") {
str += " " + "with (" + byColor.join(' OR ') + ")\n";
$($('input[name=fl-size]:checked')).each(function (index, byColor) {
if (selector === '') {
selector += "[data-category~='" + byColor.id + "']";
} else {
selector += ",[data-category~='" + byColor.id + "']";
}
});
} else {
str += " AND " + "with (" + byColor.join(' OR ') + ")\n";
$($('input[name=fl-size]:checked')).each(function (index, byColor) {
if (cselector === '') {
cselector += "[data-category~='" + byColor.id + "']";
} else {
cselector += ",[data-category~='" + byColor.id + "']";
}
});
}
}
$lis.hide();
console.log(selector);
console.log(cselector);
console.log(nselector);
if (cselector === '' && nselector === '') {
$('.flowers > div').filter(selector).show();
} else if (cselector === '') {
$('.flowers > div').filter(selector).filter(nselector).show();
} else if (nselector === '') {
$('.flowers > div').filter(selector).filter(cselector).show();
} else {
$('.flowers > div').filter(selector).filter(cselector).filter(nselector).show();
}
} else {
$lis.show();
}
$("#result").html(str);
});
function removeA(arr) {
var what, a = arguments,
L = a.length,
ax;
while (L > 1 && arr.length) {
what = a[--L];
while ((ax = arr.indexOf(what)) !== -1) {
arr.splice(ax, 1);
}
}
return arr;
}
我修改了代码here。
提前谢谢大家:-)
【问题讨论】：
-
请把相关代码贴在这里。另外，请不要通过在帖子中添加块引用来规避有关 JSFiddle 链接的规则。
-
您的问题比任何问题标签都与 CSS 相关
-
谢谢 - 我已经更新了标签。
标签： javascript jquery