javascript - 返回数据过滤器 onclick 可能吗？

Question

是否可以在 jquery 中点击时从 html 返回特定的数据过滤器？

例如:

     <div class="container">
        <nav id="filters">
          <ul> 
            <li><a class="all" href="javascript:;" data-filter="all">ALL</a></li>
            <li><a class="americas" href="javascript:;" data-filter="americas">AMERICAS / CARIBBEAN</a></li>
            <li><a class="africa" href="javascript:;" data-filter="africa">AFRICA / MIDDLE EAST</a></li>
            <li><a class="asia" href="javascript:;" data-filter="asia">ASIA / AUSTRALIA </a></li>
          </ul>        
        </nav>
      </div>

然后在我的 jquery 中:

$(function clickYoYoYo() {
    $('#yoyoyo').click(function() {
        return ($(this).attr('data-filter="americas"');
    });
});

编辑:#yoyoyo 是一个带有方形图像的 div

edit2:这就是它应该返回的内容

    <div class="row">
      <div class="container">
        <ul id="sortlist">
          <li data-filter="americas">
            <p>RETURNED INFO</p>
            <h3 class="countries">Japan</h3>
          </li>
     ...

Answer 1

您的代码中实际上存在三个错误。在您的 return 语句中，前导左括号没有结束。您可以删除左括号，因为无论如何它都是不必要的。另外，从属性名称中删除 ="americas"。另外，应该删除 clickYoYoYo 函数名称(顺便说一句，我在答案中删除了它，但之前没有提及它，因为我在OP中没有看到它)。

只要 #yoyoyo 是具有 data-filter 属性的元素之一，那么，是的，以下内容应该有效:

$(function() {
    $('#yoyoyo').click(function() {
        return $(this).attr('data-filter');
    });
})();

如果#yoyoyo不是具有data-filter属性的元素之一，那么您将需要使用一些其他逻辑/选择器来告诉它哪个元素的data-filter 返回。

换句话说，如果您有 #yoyoyo 并且您始终希望返回 americas 元素的过滤器，那么您可以编写:

...
$('#yoyoyo').click(function() {
    return $('#filters>ul>li>a.americas').first().attr('data-filter');
});
...

顺便说一句，如果您知道 data-filter 属性的值不会更改，那么您可以使用 .data('filter') 而不是 .attr('data-filter')，因为 .data() 调用会给您相同的结果，但会利用缓存。但是，如果可以更改过滤器值，那么您应该继续使用 .attr()。

更新:
根据您的评论，我认为您更需要以下其中一项:

...
$('#yoyoyo').click(function() {
    return $('#filters>ul>li>a.americas').first().text();
});
...

或

...
$('#yoyoyo').click(function() {
    return $('#filters>ul>li>a[data-filter="americas"]').first().text();
});
...