javascript - 单击鼠标，隐藏链接并显示

Question

当鼠标点击时，我需要隐藏链接并显示另一个 div。

<div class="fetch-from-link">
 <a href="#" class="test" onClick="$(this).parent().hide();">
  Fetch from link
</a>

<div class="hello">Hello world</div>
</div>

我只是使用简单的隐藏方法。但是如何在链接隐藏后显示我的“hello”div？

Answer 1

由于使用了 jQuery 来绑定(bind)事件处理程序，而不是丑陋的内联点击处理程序。

您需要hide() 当前元素，然后Class Selector ('.hello')可用于显示另一个 div。

jQuery(function($) {
  $('.test').click(function(e) {
    e.preventDefault();
    $(this).hide();
    $('.hello').show();
  })
});

.hello {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fetch-from-link">
  <a href="#" class="test">Fetch from link</a>
  <div class="hello">Hello world</div>
</div>

---

根据当前的 HTML，您可以使用 .next()

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

jQuery(function($) {
   $('.test').click(function(e) {
      e.preventDefault();
       $(this).hide().next().show();
   })
});