jQuery Alternative元素

Question

谁能帮我理解jQuery代码和它如何与我的超文本标记语言有关。链接正在遍历并隐藏所有的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>

​

Answer 2

@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，则不需要调整此代码片段中的代码。各个类名不再出现在代码中。

Answer 3

我认为你有一个额外的隐藏()。第一个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();
});

})；