Question

我有一个非常基本的网站（http://cimoril.dothome.co.kr/greece/aegean.html），我们正在为学校的响应式设计实践做，我想为每篇文章添加一个onClick事件。

我如何才能使每篇文章都有效，而不是按照课程？例如，当我点击其中一篇文章时，我只想要显示特定文章的类而不是每篇文章。如果单击第一个图像，则所有具有.text类的文章也会出现。

刚开始学习JS / jQuery，所以我无法解释得很好，并且在谷歌搜索一段时间后找不到答案......我提前道歉。

代码段：

＆＃13;

$(".text").hide();

$("article").on("click", function() {
  $("p.text").show();
});


$("article").on("mouseleave", function() {
  $("p.text").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
  <article>
    <div class="bg bg1">
      <span>Aghios Efstratios</span>
      <p class="text text1">Aghios Efstratios is a small Greek island southwest of Lemnos and northwest of Lesbos.</p>
    </div>
  </article>

  <article>
    <div class="bg bg2">
      <span>Chios</span>
      <p class="text text2">Chios is the fifth largest of the Greek islands, situated in the Aegean Sea</p>
    </div>
  </article>
</section>

＆＃13;

Answer 1

您可以使用click事件中的this引用来获取发生click事件的元素。然后，您可以在该文章元素中获取该段落。

另外，您不需要这么多$(document).ready()个处理程序。您可以将它们全部组合成一个（除非您有特定的理由这样做）。

e.g。

$(".text").hide();

$("article").click(function() {
  $(this).find("p.text").show();
});

$("article").mouseleave(function() {
  $(this).find("p.text").hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <article>
    <div class="bg bg1">
      <span>Aghios Efstratios</span>
      <p class="text text1">Aghios Efstratios is a small Greek island southwest of Lemnos and northwest of Lesbos.</p>
    </div>
  </article>

  <article>
    <div class="bg bg2">
      <span>Chios</span>
      <p class="text text2">Chios is the fifth largest of the Greek islands, situated in the Aegean Sea</p>
    </div>
  </article>
  <section>

如何显示/隐藏每篇文章/对象的课程？

1 个答案: