jQuery使用触发器调用更改事件仅触发一次

Question

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

现在，当我通过直接更改选定的选项来尝试此筛选器时，它工作得很好，但当我尝试使用URL-parameters更改选定的值时，display属性(在filter -function中动态更改)只对找到的第一个项进行更改，而所有其他具有正确过滤值的项都不会将其属性设置为block。

这是我使用的filter-function：

$(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-parameters更改选定的值：

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

​