.id（）方法在jQuery选择器上失败

Question

trying to create a function that make's a div slide down depending on it's ID using jquery. Trying to get it done as a efficiently as possible.

Here's what I have so far:

 $('.meet-the-team').on('click', function() { var member = $(this).id(); var parts = member.split(); var id = parts[parts.length - 1]; $(".member-profile #profile" + id).slideDown(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pure-g meet-the-team"> <div class="pure-u-1-4 meet-the-team-a" id="member-a"> A </div> <div class="pure-u-1-4 meet-the-team-b" id="member-a"> B </div> <div class="pure-u-1-4 meet-the-team-c" id="member-a"> C </div> <div class="pure-u-1-4 meet-the-team-d" id="member-a"> D </div> </div> <div class="pure-g member-profile member-profile-a" id="profile-a"> <div class="pure-u-10-24 member-profile-left"> <h1>Jordon McCord</h1> <h2>Designer/User Experience</h2> <i class="fa fa-linkedin-square fa-6"></i> </div> <div class="pure-u-14-24 member-profile-right"> <p>Jordan is a User Interface and User Experience Designer with over 8 years of experience working on a range of exciting projects utilising his key skills in design and front end web development. Jordan is passionate about design and user interactions and in his spare time, he really enjoys writing about himself in the third person.</p> </div> </div> <div class="pure-g member-profile member-profile-b" id="profile-b"> <div class="pure-u-10-24 member-profile-left"> <h1>Adam McCord</h1> <h2>Designer/User Experience</h2> <i class="fa fa-linkedin-square fa-6"></i> </div> <div class="pure-u-14-24 member-profile-right"> <p>Jordan is a User Interface and User Experience Designer with over 8 years of experience working on a range of exciting projects utilising his key skills in design and front end web development. Jordan is passionate about design and user interactions and in his spare time, he really enjoys writing about himself in the third person.</p> </div> </div> 

Why does this not work?

Thanks in advance for the help guys.

Answer 1

$('.meet-the-team div').on('click', function() {
    var member = $(this).attr('id');
    var parts = member.split('-');
    var id = parts[parts.length - 1];

    $(".member-profile-" + id).slideDown();
});

This should work. You could also use $("#profile-" + id).slideDown(); instead of the $(".member-profile-" + id).slideDown(); .