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声明中，主要的左括号没有结束。你可以删除open-paren，因为它无论如何都是不必要的。另外，从属性名称中删除="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()作为{{{ 1}}调用将给你相同的东西，但将利用缓存。但是，如果可以更改过滤器值，则应继续使用.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();
});
...

Answer 2

您所包含的代码并未向我们提供足够的信息来确定您尝试执行的操作。尝试更详细地解释问题。

根据您的代码，似乎您可能想要的是当您单击列表中的某个链接时，它会为您提供data-filter属性的值，以便您可以使用该属性执行某些操作值。如果是这种情况，那么最简单的方法如下：

$('#filters').on('click', 'a', function() {
  var filter = $(this).data('filter');
  //do something with the filter variable
});

可以返回数据过滤器onclick吗？

2 个答案: