Return data-filter onclick possible?

Question

is it possible to return a specific data-filter from html on click from jquery?

for example:

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

then in my jquery:

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

edit: #yoyoyo is a div with a square image

edit2: this is what its suppose to return

    <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

You actually have three bugs in your code. In your return statement, the leading open-parenthesis doesn't have a closing. You can just remove the open-paren as it's unnecessary anyway. Also, remove the ="americas" from the attribute name. Also, the clickYoYoYo function name should be removed (I removed this in my answer, incidentally, but failed to mention it before, as I didn't see it in the OP).

So long as #yoyoyo is one of the elements with the data-filter attribute then, yes, the following should work:

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

If #yoyoyo is not one of the elements with the data-filter attribute, then you will need to use some other logic/selector to tell it which element's data-filter to return.

In other words, if you have #yoyoyo and you always want to return the americas element's filter then you would write:

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

As a side-note, if you know that the value of the data-filter attribute is not going to change, then you can use .data('filter') instead of .attr('data-filter') , as the .data() call will give you the same thing but will utilize caching. If the filter value can be changed, however, then you should continue to use .attr() .

Update:
Based on your comments, I think the you are more looking for one of the following:

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

or

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

Answer 2

The code you've included does not give us enough information to determine what it is you are trying to do. Try explaining the problem in a bit more detail.

Based on your code, it seems that perhaps what you want is that when you click on one of the links in the list, it gives you the value of the data-filter attribute so that you can do something with that value. If that's the case, then the simplest approach would be the following:

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