javascript - 无法使用 jquery 切换 blockquotes 的可见性

Question

所以我在这里学习基本的 Jquery 函数。我试图使事件 block 引用变得可见，而其他 block 引用保持关闭或关闭。可以这么说。一次只有一个。

$('.read').click(function() {
    $("blockquote.visible").removeClass("visible")
    $("blockquote").addClass("visible")
    });

我在 Jsiddle 中做了一个例子并且几乎让它工作了:

https://jsfiddle.net/w3jdm8am/10/

Answer 1

你可以这样做

$('.read').click(function() {
  $("blockquote").removeClass("visible")
  $(this).parents('.container').next("blockquote").addClass("visible")
});

blockquote {
  opacity: 0;
  transition: 1s all
}
.visible {
  opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="news">
  <h2><span>Quotes</span></h2>
  <div class="info">Some cool quotes</div>

  <article>
    <div class="container">
      <div class="image"></div>
      <aside>
        <p>Beethovens best quote!</p>
        <div class="read">Read</div>
      </aside>
    </div>

    <blockquote>
      Some text
    </blockquote>

    <div class="container">
      <div class="image"></div>
      <aside>
        <p>Mozarts best quote!</p>
        <div class="read">Read</div>
      </aside>
    </div>

    <blockquote>
      Some Text
    </blockquote>

  </article>
</div>

另一种方法

$('.read').click(function() {
  var ele=$(this).parents('.container').next("blockquote");
  $("blockquote").not(ele).removeClass("visible");
  ele.toggleClass('visible');
});

blockquote {
  opacity: 0;
  transition: 1s all
}
.visible {
  opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="news">
  <h2><span>Quotes</span></h2>
  <div class="info">Some cool quotes</div>

  <article>
    <div class="container">
      <div class="image"></div>
      <aside>
        <p>Beethovens best quote!</p>
        <div class="read">Read</div>
      </aside>
    </div>

    <blockquote>
      Some text
    </blockquote>

    <div class="container">
      <div class="image"></div>
      <aside>
        <p>Mozarts best quote!</p>
        <div class="read">Read</div>
      </aside>
    </div>

    <blockquote>
      Some Text
    </blockquote>

  </article>
</div>