Question

单击关闭按钮我试图从关闭按钮父div旁边的图像中删除“模糊”类。

HTML ...

<div class="sixteen columns">

<!-- hover content -->
<div class="imagesHoverContent">

    <div class="hoverContentContainer">

    <span class="close">close</span>

        <h2 class="entry-title">title</h2>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. </p>

        <div class="tags"><a href="#">Branding</a><a href="#">Logo</a><a href="#">Automotive</a><a href="#">Email</a><a href="#">Tag</a></div>

    </div><!-- hoverContentContainer -->

</div><!-- imagesHoverContent -->

<span class="arrow"></span>
<span class="project-info"></span>

<img src="img.jpg" alt="" class="projImg blur">

</div>

...的jQuery

    $(function(){

    $( ".portfolio-item .container .columns .project-info" ).click(function() {
        $('.imagesHoverContent',$(this).parent('div:first')).addClass( "show" );
        $('.projImg',$(this).parent('div:first')).addClass( "blur" );
    });

    $( ".portfolio-item .container .columns .imagesHoverContent .close" ).click(function() {
      $(this).closest(".imagesHoverContent").removeClass( "show" );
      //$('.imagesHoverContent',$(this).parent('.blur')).removeClass( "blur" );
    });

    });

Answer 1

我们上下：）

$(this).closest(".imagesHoverContent").parent().find('.blur').removeClass( "blur");

或

$(this).closest(".imagesHoverContent").nextAll('.blur').removeClass( "blur");

有助于看到HTML完全缩进。它需要最多div.sixteen然后向下，或最多div.imagesHoverContent，然后使用nextAll('.blur')：

<div class="sixteen columns">
    <!-- hover content -->
    <div class="imagesHoverContent">
        <div class="hoverContentContainer"> <span class="close">close</span>

             <h2 class="entry-title">title</h2>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.</p>
            <div class="tags"><a href="#">Branding</a><a href="#">Logo</a><a href="#">Automotive</a><a href="#">Email</a><a href="#">Tag</a>

            </div>
        </div>
        <!-- hoverContentContainer -->
    </div>
    <!-- imagesHoverContent -->
    <span class="arrow"></span>

    <span class="project-info"></span>

    <img src="img.jpg" alt="" class="projImg blur" />
</div>

从位于父级外部的图像中移除关闭类

1 个答案: