javascript - 如何在单击父 div 时切换无序列表中元素上的类？

Question

这看起来很简单，但行不通。我试图在无序列表中切换一个类。例如，单击带有配置文件类的“this”div，找到配置文件文本的下一个实例并添加显示文本类。如果用户单击第二个 ul li，它将删除该类，并且显然会相应地重新分配它。欢迎任何帮助。

<ul>
<li>
    <div class="profile">
      <img src="team.jpg" alt=""> 
      <div class="overlay"></div>
      <div class="profile-text">
          <h3>Anna Smith</h3>
          <h3>Consultant</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
</li>

<li>
    <div class="profile">
      <img src="team.jpg" alt=""> 
      <div class="overlay"></div>
      <div class="profile-text">
          <h3>John Smith</h3>
          <h3>Advisor</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
</li>

  $(document).ready(function()   {

     $('.profile').click(function() {
        $(this).next('.profile-text').toggleClass('show-text');   
     });

  });

Answer 1

FIDDLE

$(".profile").click(function() {
  $(".profile-text").removeClass("show-text");
  $(this).children(".profile-text").addClass("show-text");
});

.show-text {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="profile">
      <img src="team.jpg" alt="">
      <div class="overlay"></div>
      <div class="profile-text show-text">
        <h3>Anna Smith</h3>
        <h3>Consultant</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </li>

  <li>
    <div class="profile">
      <img src="team.jpg" alt="">
      <div class="overlay"></div>
      <div class="profile-text">
        <h3>John Smith</h3>
        <h3>Advisor</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </li>