Question

如果您去查看JQuery的.toggle的api，您可以看到它自1.8以来已被弃用，并在1.9中删除。

如果我使用旧版本的JQuery，这就是我通常会使用的。 [Example]

$('.drop-section a').toggle(function() {
  $(this).css({"color" : "#666", "background-color" : "#1f1f21"});
},
function() {
  $(this).css({"color" : "#a9a9a9", "background-color" : "#444"});
});

我正在尝试从点击事件中执行一个简单的解决方法。但是我无法让它发挥作用。 [Here's the fiddle]

我知道我可以使用toggleClass，但我希望使用下面的内容来实现此效果。

$('.drop-section a').click(function() {
  var clicked = false;

  if (clicked) {
    clicked = false;
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"});
  }
  clicked = true;
  $(this).css({"color" : "#666", "background-color" : "#1f1f21"});

});

非常感谢任何帮助。

Answer 1

在您的情况下，我只会使用仍然受支持的toggleClass()。添加一个将按钮更改为“on”状态的类，然后单击以打开和关闭该类。我修改了你的JSbin来演示：New JSBin

修改：如果您决定使用您的代码执行此操作，或者您没有告诉我们其他要求：一旦您离开处理程序，您的clicked变量就会被销毁，所以当它被点击时它不会“记住”。您也不想只是将其设为全局，因为它不适用于多个按钮。

您想要的是将“点击”数据附加到您正在切换内容的元素上，使用data()方法很容易：

$('.drop-section a').click(function() {
  if ($(this).data('clicked')) {
    $(this).data('clicked',false);
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"});
  } else {
    $(this).data('clicked',true);
    $(this).css({"color" : "#666", "background-color" : "#1f1f21"});      
  }
});

另外，我不确定为什么第二位没有包含在else{}中，但它应该是，否则它将始终以“点击”结束，无论状态如何。我（不小心，JSBin中的版本控制缺乏与jsfiddle相比）更新了上面的链接以使用此代码。旧链接here。如果它似乎不起作用，请务必单击“使用JS运行”按钮。

Answer 2

实际上你可以这样做：

<强> LIVE DEMO

$('a').click(function( e ) {
  e.preventDefault();
  var c = this.c = !this.c;    // Will remember the clicked state
  $(this).css({ "color": c?"#666":"#aaa" });
});

解释它的工作原理：

以上几乎与设置元素data-*属性相同，但我们将使用Object本身并指定一个包含布尔值的属性。

DEMO

$('a')是一个jQuery的对象元素集合，
所以它是对象，而this是点击元素的的JS表示。
在JS中，我们总是可以向对象添加新属性，例如：object.something = "value";对吗？

好的，在我们的例子中，我们将使用this对象并指定一个名为c的虚拟属性，如：this.c

所以现在我们只需要设置布尔（true / false）值并将其附加到this.c

this.c = true ;

考虑到我们需要在每次点击时切换值：

this.c = !this.c ;

否定只会将布尔值反转为相反的。

到目前为止我们拥有什么？

每次点击我们都会将按钮的this.c属性切换为true / false。

让我们使用该布尔值并将其存储到我们为简单起见而调用的变量中c

var c = this.c = !this.c;

对于直接存储在该元素属性中的每次点击，基本上都是c = (a true/false value)。

现在有了这个布尔值，我们可以将它与条件运算符（AKA 三元运算符）?:结合使用来切换任何期望值，在我们的例子中是颜色：

statement ? do this if true : do that if false ;

或在我们的案例中：

"color": ( c ? "#666" : "#aaa" ) // #666 if true, #aaa if false

Answer 3

演示 http://jsbin.com/ODIMaju/1/edit

更好智能toggleClick工作演示：http://jsbin.com/ODIMaju/1/edit

翻转警报将帮助您理解并且我已经更改了变量的范围。

如果您热衷于:) http://forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead

休息应该满足您的需求:)

代码

 $.fn.toggleClick = function(){
    var methods = arguments, // store the passed arguments for future reference
        count = methods.length; // cache the number of methods 

    //use return this to maintain jQuery chainability
    return this.each(function(i, item){
        // for each element you bind to
        var index = 0; // create a local counter for that element
        $(item).click(function(){ // bind a click handler to that element
            return methods[index++ % count].apply(this,arguments); // that when called will apply the 'index'th method to that element
            // the index % count means that we constrain our iterator between 0 and (count-1)
        });
    });
};

<强>码

$(document).ready(function() {
 var clicked = false;

$('.drop-section a').click(function() {

  if (clicked) {
    alert(clicked);
    clicked = false;
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"});
  }
  else {
    alert(clicked);
    clicked = true;

  $(this).css({"color" : "#666", "background-color" : "#1f1f2zxc1"});
  }
});
});

Answer 4

在jQuery页面上，它说：

注意：此方法签名在jQuery 1.8中已弃用，在jQuery 1.9中已删除。 jQuery还提供了一个名为.toggle（）的动画方法，可以切换元素的可见性。是否触发动画或事件方法取决于传递的参数集。

它带你到这个页面＆gt;＆gt; http://api.jquery.com/toggle/

我建议使用toggleClass：

body {
  background: #333;
}

a {
  cursor: pointer;
  padding: 5px;
  background: #444;
  font: 300 16px/1.5 'museo-sans', 'Open Sans', sans-serif;
  color: #a9a9a9;
  outline: none;
  text-decoration: none;
  background-color: #444;
}

.newClass{
  color: #a9a9a9;
  background-color: #444;
}

的jQuery

$(document).ready(function(){
  $("a").click(function(){
     $(this).toggleClass("newClass");
  });
});

切换单击替代

4 个答案: