從位於父親外側的圖片上移除關閉的類

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>