javascript - jQuery 替代 Div 元素

Question

谁能帮我理解 jQuery 代码以及它与我的 HTML 的关系。链接正在通过并隐藏所有 div，但是我不明白为什么单击链接时 div 没有显示。

HTML:

<section class="meet-the-team pt-5 pb-5">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <a href="javascript:;" class="conor-link" data-target="conor">Link 1</a>
        <a href="javascript:;" class="kyle-link" data-target="kyle">Link 2</a>
        <a href="javascript:;" class="tracey-link" data-target="tracey">Link 3</a>
        <a href="javascript:;" class="frank-link" data-target="frank">Link 4</a>
        <a href="javascript:;" class="rosie-link" data-target="rosie">Link 5</a>
        <div class="meet-the-team-info">
          <div class="conor-div">
            <h1>Conor</h1>
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
            <p>Hello Hello Hello</p>
          </div>
          <div class="kyle-div">I'm div2</div>
          <div class="tracey-div">I'm div3</div>
          <div class="frank-div">I'm div4</div>
          <div class="rosie-div">I'm div5</div>
        </div>
      </div>
    </div>
  </section>

jQuery:

$(function () {

    $(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();

    $("a").bind("click", function () {
       $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
       var target = $(this).data("target");
       $("."+target).toggle();
    });

});

Answer 1

你只需要改变你的 jQuery 的一行。

$(function () {

    $(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();

    $("a").bind("click", function () {
       $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
       var target = $(this).data("target");
       $("."+target+"-div").show() //added "-div" and changed toggle to show
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <a href="javascript:;" class="conor-link" data-target="conor">Link 1</a>
        <a href="javascript:;" class="kyle-link" data-target="kyle">Link 2</a>
        <a href="javascript:;" class="tracey-link" data-target="tracey">Link 3</a>
        <a href="javascript:;" class="frank-link" data-target="frank">Link 4</a>
        <a href="javascript:;" class="rosie-link" data-target="rosie">Link 5</a>
        <div class="meet-the-team-info">
          <div class="conor-div">
            <h1>Conor</h1>
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
            <p>Hello Hello Hello</p>
          </div>
          <div class="kyle-div">I'm div2</div>
          <div class="tracey-div">I'm div3</div>
          <div class="frank-div">I'm div4</div>
          <div class="rosie-div">I'm div5</div>
        </div>
      </div>
    </div>
  </section>