Click a link and invoke another

Question

Ok so I have this html code:

<h1 class="left" data-target="newest">Newest</h1>
............
<h1 class="left" data-target="topRated">Top Rated</h1>
....

which clicking on the h1 tag does a jquery function, now I have this html links

        <li>
            <a href="">Newest</a>
        </li>
        <li>
            <a href="">Top Rated</a>
        </li>

I need to do, somehow, that when clicking <a href="">Newest</a> in the list or <a href="">Top Rated</a> , to be like if you were clicking on the h1 tag. Is that possible?

Thank you.

Answer 1

Change your links to:

<a href="#" class="h1-selector" data-action="newest">Newest</a>

Then, you just need to trigger a click on the H1 :

$('a.h1-selector').click(function(){
    $('h1[data-target="'+$(this).data('action')+'"]').click();
});

Answer 2

Based on your comment, you want to be able to click on an h1, and have it really click the related anchor.

$("h1").click(function(){
    var textTarget = $(this).text();
    $("a").filter(function(i, val) { return $(val).text === textTarget; }).click();
});

Ideally though, if you could do:

<li>
    <a href="" data-target="newest">Newest</a>
</li>
<li>
    <a href="" data-target="toprated">Top Rated</a>
</li>

then the script would simply be:

$("a").click(function(){
    $("h1[data-target='" + $(this).data("target") + "'").click();
});

Answer 3

$('a').click(function(){
  var href = $(this).text();//Newest
  $('h1[data-target=' + href + ']').trigger('click');
});