1

When a user clicks a certain link inside my DIV, I want to hide the specific DIVs inside that DIV where the link was clicked. I use the following code:

  $(".entry").on('click', function(e) {

        e.preventDefault();

        // Is the link to show/hide statements clicked?

        if (e.target.className == 'app-link-menu') {

            if ($(this).find('.app-link-menu').text() == 'hide filtered') {
                $(this).find('.nonmatched-sentence').fadeOut(400);
                $(this).find('.app-link-menu').text('show filtered');
            }
            else {
                $(this).find('.nonmatched-sentence').fadeTo(400, '0.4');
                $(this).find('.app-link-menu').text('hide filtered');
            }

        }

However, it shows / hides the elements on .nonmatched-sentence class in ALL the .entry DIVs, not only within the one the link was clicked in.

Do you know how to correct that?

Thanks!

UPDATE: HTML

        <div class='entry' data-uid='d12ecef0-c243-11e3-bdbd-476fefd65326' data-hashtags='#tarr #bresson'>
            <p class='entry-text'><a href="/concepts/tarr" title="#tarr" class="app-concept-link">#tarr</a> <a href="/concepts/bresson" title="#bresson" class="app-concept-link">#bresson</a> <a title="Search filmDirectors" class="app-context-link" href="/contexts/filmDirectors">@filmDirectors</a></p>
            <p class='entry-date'>13973082279400000</p>
            <p class='entry-menu'>&nbsp;&nbsp;&nbsp;<a class="app-link-menu" href="#">show filtered</a></p>
            <div class='separator'>&nbsp;</div>

        </div>

        <div class='entry' data-uid='cde3e9b0-c243-11e3-bdbd-476fefd65326' data-hashtags='#tarr #sokurov'>
            <p class='entry-text'><a href="/concepts/tarr" title="#tarr" class="app-concept-link">#tarr</a> <a href="/concepts/sokurov" title="#sokurov" class="app-concept-link">#sokurov</a> <a title="Search filmDirectors" class="app-context-link" href="/contexts/filmDirectors">@filmDirectors</a></p>
            <p class='entry-date'>13973082224150000</p>
            <p class='entry-menu'>&nbsp;&nbsp;&nbsp;<a class="app-link-menu" href="#">show filtered</a></p>
            <div class='separator'>&nbsp;</div>

        </div>
7
  • 1
    Can you post the HTML as well?
    – j08691
    Nov 10, 2014 at 16:14
  • 1
    Definitely need to see the HTML, but I have a feeling I see the issue. Are you wanting to run the find() on the .entry button, or app-link-menu? You're doing the former with this (as that scope belongs to the function, not the conditional statement), but I suspect you want to do the latter. But hard to say without seeing the structure :) Nov 10, 2014 at 16:19
  • @NathanHornby actually I do want to run find() on the .entry block from within of which the app-link-menu was clicked. Nov 10, 2014 at 16:22
  • try replacing $(this).find .. with $(e.target).find .. ? Nov 10, 2014 at 16:23
  • seems to work okay in this fiddle jsfiddle.net/us860hof Nov 10, 2014 at 16:35

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.