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

Question

所以我在这里学习基本的Jquery函数。我试图使活动的blockquote变得可见而其他人保持关闭或关闭。切换可以这么说。一次只有一个。

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

我在Jsiddle做了一个例子，几乎让它起作用了：

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

Answer 1

你可以做这样的事情

loadGif.Visibility = Visibility.Collapsed;

$('.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
}