JQuery在点击时隐藏/显示多个div的内容

Question

我正在尝试同时显示/隐藏多个 div。我正在使用anchor 标签来实现这一点。我想同时更改两个单独 div 的内容。一个 div 包含 iframe 和其他视频说明。
到目前为止，我已经设法让我的一个 div 改变它的内容，但不是另一个。当我点击anchor 标签时，有没有办法让两个 div 的内容发生变化？

我的代码。 HTML：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2 class='text-center'>Left Side</h2>
      <ul>
        <li><a class='myTag' href="#" rel="one">One</a></li>
        <li><a class='myTag' href="#" rel="two">Two</a></li>
        <li><a class='myTag' href="#" rel="three">Three</a></li>
      </ul>
    </div>
    <div class="col-md-6">
      <h2 class='text-center'>Right Side</h2>
      <div id='zero'>
        <img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
      </div>
      <div id='one' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
        </iframe>
      </div>
      <div id='two' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
        </iframe>
      </div>
      <div id='three' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
        </iframe>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 text-center">
      <h2>Lower container</h2>
      <div id='zero'>
        <p>This text needs to change. Video description</p>
      </div>
      <div id='one' style="display: none">
        <p>This is my video description</p>
      </div>
    </div>
  </div>
</div>

JS：

$('.myTag').on('click', function(){
  var target = $(this).attr('rel');
  $("#"+target).show('slow').siblings("div").hide('slow');
});

还有一个后续问题，我是否可以将此设置为可切换（我尝试在行尾添加 toggle()，但它只会让一切变得更糟），所以当我再次单击 anchor 标签时，它会返回原始图像?
这是codepen，所以你可以更好地理解我的问题：https://codepen.io/Karadjordje/pen/ybRyyo?editors=1010

Answer 1

将 id 更改为 class... 而不是 id="one" 放入 class="one"，并在 jquery 中放入：

$('.myTag').on('click', function(){
  var target = $(this).attr('rel');
  $("."+target).show('slow').siblings("div").hide('slow');
});

Answer 2

问题的症结在于 ID 必须是唯一的。如果您有多个相同的 ID，那么它将永远无法按预期工作。我将内容切换到类，它按您的预期工作。

$('.myTag').on('click', function(){
  var target = $(this).attr('rel');
  $("."+target).show('slow').siblings("div").hide('slow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2 class='text-center'>Left Side</h2>
      <ul>
        <li><a class='myTag' href="#" rel="one">One</a></li>
        <li><a class='myTag' href="#" rel="two">Two</a></li>
        <li><a class='myTag' href="#" rel="three">Three</a></li>
      </ul>
    </div>
    <div class="col-md-6">
      <h2 class='text-center'>Right Side</h2>
      <div class='zero'>
        <img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
      </div>
      <div class='one' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
        </iframe>
      </div>
      <div class='two' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
        </iframe>
      </div>
      <div class='three' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
        </iframe>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 text-center">
      <h2>Lower container</h2>
      <div class='zero'>
        <p>This text needs to change. Video description</p>
      </div>
      <div class='one' style="display: none">
        <p>This is my video description</p>
      </div>
      <div class='two' style="display: none">
        <p>Two!</p>
      </div>
      <div class='three' style="display: none">
        <p>Three!</p>
      </div>
    </div>
  </div>
</div>

Answer 3

不要为每个描述使用多个 div，而是使用一个 div 并根据 rel 值更改内容。将描述存储在对象中并使用rel 值获取描述。

// store your description in here
// on click the anchor tag get the rel value and display description
// like desc[relvalue]
var desc = {'one': 'no man no cry jimmy sax', 'two': 'Pendulum - hold on', 'three': 'Paul Van Dyk'};

$('.myTag').on('click', function(){
  var target = $(this).attr('rel');
  $("#"+target).show('slow').siblings("div").hide('slow');
  $('#desc p').html(desc[$(this).attr('rel')])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2 class='text-center'>Left Side</h2>
      <ul>
        <li><a class='myTag' href="#" rel="one">One</a></li>
        <li><a class='myTag' href="#" rel="two">Two</a></li>
        <li><a class='myTag' href="#" rel="three">Three</a></li>
      </ul>
    </div>
    <div class="col-md-6">
      <h2 class='text-center'>Right Side</h2>
      <div id='zero'>
        <img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
      </div>
      <div id='one' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
        </iframe>
      </div>
      <div id='two' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
        </iframe>
      </div>
      <div id='three' style="display: none">
        <iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
        </iframe>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 text-center">
      <h2>Lower container</h2>
      <div id='desc'>
        <p>This text needs to change. Video description</p>
      </div>
    </div>
  </div>
</div>