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必须是唯一的。如果您有多个相同的ID，那么它将永远不会按预期工作。我将课程改为课程，并按照您的预期进行工作。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

// 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')])
});

＆＃13;

<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>

＆＃13;

Answer 3

将ID更改为类... 而不是id =“one”put class =“one”，而在jquery中放置：

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

JQuery在点击

3 个答案: