Question

我有一个国家清单和一个与这些国家相对应的地区清单。我希望单击该区域时可以显示属于特定区域的国家。这涉及访问region元素的属性值，并使用jQuery click事件使用它来查找国家/地区。

<ul id="countries_list">
    <li class="d-none" region_id="x16"><a href="/">Peru</a></li>
    <li class="d-none" region_id="x8"><a href="/">Philippines</a></li>
    <li class="d-none" region_id="x8"><a href="/">Bangladesh</a></li>
</ul>                        

<ul id="region_list">
        <li region="x8"><a href="/">Eastern Asia</a></li>
        <li region="x11"><a href="/">South America</a></li>
</ul>

点击事件处理程序：

$('#region_list').on('click', 'li', function (event){
        event.preventDefault();
        var selected_region = $(this).attr("region");
        console.log(selected_region);    //x8
        $("#countries_list li[region_id=selected_region]").removeClass('d-none');
});

即使region_id="x8"返回console.log(selected_region)，单击“东亚”也不会显示带有x8的国家。

当我使用

对值进行硬编码（作为测试）时，它可以工作

$("#countries_list li[region_id='x8']").removeClass('d-none');

相关帖子建议使用data-foo属性来更改属性值，例如var selected_region = $(this).data('ref');但是这里我不是在更改属性值，而是在进一步使用它。

Answer 1

似乎您正在将字符串而不是实际值硬编码到查询中。试试这个吧。

$("#countries_list li[region_id=" + selected_region + "]").removeClass('d-none');

或者，如果您使用的是ES2015标准……

$(`#countries_list li[region_id=${selected_region}]`).removeClass('d-none');

Answer 2

$('#region_list').on('click', 'li', function (event){
        event.preventDefault();
        var selected_region = $(this).attr("region");
        $("#countries_list li[region_id="+selected_region+ "]").removeClass('d-none');
        console.log(selected_region);    //x8
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="countries_list">
    <li class="d-none" region_id="x16"><a href="/">Peru</a></li>
    <li class="d-none" region_id="x8"><a href="/">Philippines</a></li>
    <li class="d-none" region_id="x8"><a href="/">Bangladesh</a></li>
</ul>                        

<ul id="region_list">
        <li region="x8"><a href="/">Eastern Asia</a></li>
        <li region="x11"><a href="/">South America</a></li>
</ul>

您的selected_region不是字符串，应使用+ +

将其连接起来

之前：

$("#countries_list li[region_id=selected_region]").removeClass('d-none');

之后：$("#countries_list li[region_id="+selected_region+ "]").removeClass('d-none');

使用元素的属性值查找相关元素

2 个答案: