숨겨진 요소 표시

어떻게 작동하는지 완전히 이해할 수 없어 아래 jquery 코드에 대한 질문이 있습니다. javascript가 class showMore와 함께 첫 번째 ahref를 클릭하면 hiddenSpan 클래스의 첫 번째 숨겨진 요소가 정확히 숨김을 취소하고 두 번째 요소를 클릭 할 때 JS가 정확히 두 번째 숨겨진 요소를 숨김 해제한다는 것을 알고 싶습니다. 두 요소는 동일한 hiddenSpan 클래스를 가지고 있으므로 이러한 요소가 어떻게 인식됩니까?숨겨진 요소 표시

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
</head> 
<body> 
<div class="container flex our-people clearfix"> 
<div class="tile"> 
    <h4>Peter Bolton - Partner</h4> 
    <img src="img.jpg" /> 
    <p>Peter Bolton lives in Burnley with his wife and two children.<span class="hiddenSpan">Peter was admitted as a solicitor in May 1975, having completed two years Articles with a Blackburn firm of solicitors.</span><a href="#" class="showMore">Show more</a></p> 
    <a href="mailto:" class="btn">Send email <i class="fa fa-caret-right" aria-hidden="true"></i></a> 
</div> 
<div class="tile"> 
    <h4>Peter Bolton - Partner</h4> 
    <img src="img.jpg" /> 
    <p>Peter Bolton lives in Burnley with his wife and two children.<span class="hiddenSpan">Peter was admitted as a solicitor in May 1975, having completed two years Articles with a Blackburn firm of solicitors.</span><a href="#" class="showMore">Show more</a></p> 
    <a href="mailto:" class="btn">Send email <i class="fa fa-caret-right" aria-hidden="true"></i></a> 
</div> 
</div> 
<script src="script.js"> </script> 
</body> 
</html>

자바 스크립트

(function($) { 

$(".hiddenSpan").hide(); 

$(document).ready(function() { 

    $(".showMore").on("click", function(e) { 

     e.preventDefault(); 

     var $this = $(this), 
      content = $this.prev(); 

     if(content.is(":hidden")) { 
      content.slideDown(700); 
      $this.text("Show less"); 
     } else { 
      content.slideUp(); 
      $this.text("Show more"); 
     } 

    }); 
}); 

})(jQuery);

출처

2017-10-08 Marcin Mroczko

$ (이)를 클릭 showmore 클래스를 referances. 클릭 된 클래스의 이전 범위를 대상으로합니다. –

$(".showMore").on("click", function(e) {//this is clicking the class 

    e.preventDefault(); 

    var $this = $(this),//as there is more than one with same class 'this' is referancing the clicke done 
     content = $this.prev();//here he gets the previous element of the clicked one 

    if(content.is(":hidden")) {//asks if it is hidden or no 
     content.slideDown(700);//if hjidden then show it 
     $this.text("Show less");//set the text of a tag to "show less" 
    } else { 
     content.slideUp();// else if not hidden then hide it 
     $this.text("Show more");//the the text of a tag to show more. 
    } 

});

출처

2017-10-08 08:41:19

정말 고마워요 :) –

호프 도움이) =) n.p –

답변

관련 문제