当我在jquery中添加toggle事件时,为什么我的按钮会消失？

Question

我想在粗体和普通之间切换文本我为它制作了这个代码,但是当我打开页面时,粗体按钮消失了吗？

    $("#bold").toggle(function() {
    $('.focus').css("font-weight", $(this).val());
    }, function() {
    $('.focus').css("font-weight", "normal");
    });

我的代码有问题吗？请提前帮助,谢谢.

Answer 1

假设你使用的是jQuery 1.9或更高版本,问题是从库中删除了.toggle()事件处理方法.所以你实际上调用的是隐藏/显示元素的函数.(在jQuery的早期版本中,两个函数都存在,jQuery根据传入的参数找出了你的意思.).toggle()

您可以使用标准.click()处理程序轻松实现自己的切换:

$("#bold").click(function() {
   var f = !$(this).data("toggleFlag");
   if (f) {
      $('.focus').css("font-weight", $(this).val());
   } else {
      $('.focus').css("font-weight", "normal");
   }
   $(this).data("toggleFlag", f);
});

这使用该.data()方法来跟踪布尔标志以指示要执行的代码.第一次调用click处理程序时,将返回标志,undefined因为它之前没有设置过,但我们只是将其转换为布尔值!(假设您要在第一次单击时执行if而不是else情况) ).

Answer 2

它消失了,因为不推荐使用该版本的切换,并且在较新版本的jQuery中,它所做的只是切换可见性.

你可以这样做:

var state = true;

$("#bold").on('click', function() {
    $('.focus').css("font-weight", state ? this.value : 'normal');
    state = !state;
});

小提琴