Question

我使用了earlier post并成功将其实现为具有过滤功能的二维产品查看器。

我非常感谢开发和分享此代码的人们。

我希望从产品中点击返回时可以保留选择吗？也许可以在选中复选框时将选项显示为URL中的变量，这样您可以点击返回相同的选项吗？

另一件事，我试图添加一系列单选按钮，与实际的复选框或jQuery无关，但由于某种原因，jQuery在单击时对单选按钮作出反应。有没有办法去禁止＆＃34;这个？即使单选按钮不受影响，当使用现有复选框进行过滤时，如果应该显示所有内容，则隐藏所有内容时会出现错误行为。

    <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。

我事先感谢你们： - ）

Answer 1

我现在已经获得了第一部分的帮助，现在我已经成功地将这些产品并排列出来了。

这是Jfiddle for that

body {
    font-family:'Arial';
    color:#646464;
}
.continents-wrap {
    float:left;
    width:20%;
    margin:0 5% 0 0;
    padding:0;
}
.flowers-wrap {
    float:left;
    width:20%;
    margin:0 5% 0 0;
    padding:0;
    position:relative;    
}
.flowers {
    float:left;
    width:600px;
    border:1px solid #FF00FF;
}
.flowers div {
    float:left;
    width:300px;
    height:68px;
    line-height:68px;
    padding:0 10px;
    background:#eee;
    margin:0;
    position:relative;
    border:1px solid #00FF00;
    box-sizing: border-box;
}

如果我可以将代码粘贴到URL，这将是非常好的，因为这可以帮助保留从详细查看产品回来时的选择。有人可以帮忙吗？

另一件事，我试图添加一系列单选按钮，与实际的复选框或jQuery无关，但由于某种原因，jQuery在单击时对单选按钮作出反应。有没有办法“禁用”这个？

JSFiddle for that is here

<label style="font-size:12px;">    <input type="radio" onclick="window.location='?page=product-list&katsel=1'"> Vis alle</label><br/>
<label style="font-size:12px;">    <input type="radio" onclick="window.location='?page=product-list&katsel=2'"> Vis noget</label><br/>


<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>

即使单选按钮不受影响，当使用现有复选框进行过滤时，如果应该显示所有内容，则会隐藏所有内容，从而导致错误行为。

----更新----

我不再需要考虑URL的第二部分。因此我提出了这个问题。

使用jQuery过滤复选框 - 保留URL中的选择

1 个答案: