显示隐藏元素

Question

我对下面的 jquery 代码有疑问，因为我不完全理解它是如何工作的。我想知道 javascript 如何知道当我点击第一个带有 class showMore 的 ahref 时它只会取消隐藏带有 class hiddenSpan 的第一个隐藏元素，当我点击第二个元素，JS 取消隐藏第二个隐藏元素。这两个元素具有相同的 hiddenSpan classes 那么如何识别这些元素？

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>

JavaScript

(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);

Answer 1

$(".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.
    }

});

显示隐藏元素

Show hidden elements

jquery

hidden

onclick

this

elements