Question

尝试使用jquery创建一个使div下滑的功能，具体取决于它的ID。试图尽可能有效地完成它。

这是我到目前为止所拥有的：

＆＃13;

$('.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();

             });

＆＃13;

<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>

＆＃13;

为什么这不起作用？

提前感谢帮助人员。

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

这应该有效。您也可以使用$("#profile-" + id).slideDown();代替$(".member-profile-" + id).slideDown();。

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

1 个答案: