Question

我正在尝试创建一个按钮，在单击时会使文本消失，并伴有警报，然后再次单击时再次显示相同的警报。我到目前为止的代码是：

$(".great-grandma-button").click(function(){
      $("#great-grandma").find("h1").toggle();
      alert("Grandma's Gone!");
    });

所以使文本消失并重新出现很容易，初始警报也很简单，所以我只需要知道如何使用与第二次点击相关的不同警报。

Answer 1

由于.toggle()函数已经在修改元素的可见性，您可以在所述元素上使用.is(':visible')函数，如下所示：

$(".great-grandma-button").on('click', function(e) {
    var h1 = $("#great-grandma").find("h1");
    h1.toggle();
    if (h1.is(':visible')) {
        alert("The thing is visible.");
    } else {
        alert("The thing is NOT visible");
    }
});

jsFiddle demo

Answer 2

您可以设置一个变量，或者为其中一个元素添加一个类，具体取决于您拥有多少元素将改变每个解决方案的容易程度。

var grandmaVisable = true;
$(".great-grandma-button").click(function(){
      $("#great-grandma").find("h1").toggle();
      if (grandmaVisable == true) {
        grandmaVisable = false;
        alert("Grandma's Gone!");
      } else {
        grandmaVisable = true;
        alert("Grandma's Back!");
      }
    });

更好的方法是使用jQuery的.toggleClass()将CSS类切换到隐藏的类。然后，该类的CSS可以将其标记为隐藏。

如果在隐藏/显示类时需要执行其他操作，则可以使用.hasClass()查看隐藏的标记是否存在。

https://api.jquery.com/toggleClass/

https://api.jquery.com/hasClass/

Answer 3

您可以使用jQuery函数或选择器之一来检查内容当前是否可见（即$('h1').is(":visible")或只使用此选择器$('h1:visible')），或者您可以按如下方式使用变量：

var isVisible = true;
$(".great-grandma-button").click(function(){
  $("#great-grandma").find("h1").toggle();
  if (isVisible) {
    alert("Grandma's Gone!");
  } else {
    alert("Grandma's Back!");
  }
  isVisible = !isVisible;
});

用jquery切换文本

3 个答案: