从位于父级外部的图像关闭时删除 class

Question

单击关闭按钮时，我试图从位于关闭按钮父级 div 外侧的图像中删除 class 'blur'。

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>

从位于父级外部的图像关闭时删除 class

remove class on close from image positioned outside of parent

jquery

removeclass