编辑：

Question

我正在研究一个使用change函数的下拉过滤器。

现在，当我通过直接更改选定的选项来尝试使用此过滤器时，它可以正常工作，但是当我尝试使用URL参数来更改选定的值时，显示属性（在过滤器功能中会动态更改）仅针对第一项更改找到的内容以及所有其他具有正确过滤值的项目都不会将其属性设置为block。

这是我使用的过滤功能：

$(document).ready(function() {
    $('.customFilter select').change(function(e) {
        e.preventDefault();
        var filterValue = $('#myDropdown').val();

        var filterSelector = '#container .filter-item' + '.' + filterValue);

        $('#jpagescontainer .photo-item').css('display','none');
        $(filterSelector).css('display','block');
    });
});

这是我使用URL参数更改所选值的功能：

$(document).ready(function() {
    var cat = getUrlParameter('category');

    $('#myDropdown option[value=' + cat + ']').attr("selected", "selected");
    $('#myDropdown option[value=' + cat + ']').trigger('change');
});

两个调用的两个过滤器变量保持不变。

我的HTML看起来像这样：

<div class="customFilter">
    <select id="myDropdown" class="filter">
        <option value="" selected="selected">Show all</option>
        <option value="opt1">Option1</option>
        <option value="opt2">Option2</option>
    </select>
</div>

<div id="container">
    <div class="filter-item opt1">
        <p>Some Text 1</p>
    </div>
    <div class="filter-item opt2">
        <p>Some Text 2</p>
    </div>
</div>

URL函数是否有问题，或者我缺少什么？

编辑：

在Mark Baijens的帮助下，我几乎可以弄清楚了……这个问题是由一个附加的脚本引起的，该脚本将显示的项目限制为20个，恰好碰巧只有前20个项目之一与过滤器类别。

Answer 1

您的问题有点不清楚。那里的代码有些问题。我想这就是你想要的。我逃脱了getUrlParameter函数，因为它在摘要中不起作用。我用opt1的值替换了它，以模仿url函数值。

$(document).ready(function() {
    $('.customFilter select').change(function(e) {
        e.preventDefault();
        var filterValue = $('#myDropdown').val();
        
        if(filterValue === '') {
            var filterSelector = '#container .filter-item';
        }
        else {
            var filterSelector = '#container .' + filterValue;
        }

        $('#container .filter-item').hide();
        $(filterSelector).show();
    });
    var cat = 'opt1'; //getUrlParameter('category');

    $('#myDropdown').val(cat);
    $('#myDropdown').trigger('change');
});

.filter-item {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="customFilter">
    <select id="myDropdown" class="filter">
        <option value="" selected="selected">Show all</option>
        <option value="opt1">Option1</option>
        <option value="opt2">Option2</option>
    </select>
</div>

<div id="container">
    <div class="filter-item opt1">
        <p>Some Text 1</p>
    </div>
    <div class="filter-item opt1">
        <p>Some Text 2</p>
    </div>
    <div class="filter-item opt2">
        <p>Some Text 3</p>
    </div>
</div>

jQuery使用触发器调用Change Event只会触发一次

编辑：

1 个答案: