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

@natels 的解决方案有效，值得被接受。但即使是他的解决方案也可以缩短一点：

$(function () {
  $("a").click(function () {
    $(".meet-the-team-info div:visible").hide(); // first hide all visible team divs,
    $("."+this.dataset.target+"-div").show();    // then show the chosen one
  }).eq(0).click(); // emulate a click on the first link (index=0)
});

<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="#" class="conor-link" data-target="conor">Link 1</a>
        <a href="#" class="kyle-link" data-target="kyle">Link 2</a>
        <a href="#" class="tracey-link" data-target="tracey">Link 3</a>
        <a href="#" class="frank-link" data-target="frank">Link 4</a>
        <a href="#" class="gwen-link" data-target="gwen">Link 5</a>
        <a href="#" class="rosie-link" data-target="rosie">Link 6</a>
        <div class="meet-the-team-info">
          <div class="conor-div">
            <h1>I'm 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 Kyle</div>
          <div class="tracey-div">I'm Tracey</div>
          <div class="frank-div">I'm Frank</div>
          <div class="gwen-div">I'm Gwen</div>
          <div class="rosie-div">I'm Rosie</div>
        </div>
      </div>
    </div>
  </section>

如果页面中要包含更多的div，则无需调整此sn-p中的代码。单独的类名不再出现在代码中。

Answer 2

你只需要改变你的 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>

Answer 3

我认为你有一个额外的 hide() 那里。第一个 hide()，隐藏页面加载时的所有 div。但是然后点击你说“隐藏”和“切换”。他们正在互相取消或做一些意想不到的事情。尝试切换（）。而且您还缺少选择器中的“div”部分。

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

});