jQuery相同按钮的不同功能

Question

我想要的是ID为btn <button> ，在单击时可以更改颜色。 然后，我希望它更改按钮的ID以及<button>时具有不同ID的相同<button>来执行其他功能。

示例： http ： //jsfiddle.net/mpxfmwvg/

 var btn = $("#btn"); var btn2 = $("#btn2"); var one = $(".one"); btn.on("click",function(){ one.css("background-color","black"); btn.attr("id","btn2").text("Buton2"); }); btn2.on("click",function(){ one.css("background-color","green"); btn2.attr("id","btn").text("Button"); }); 

 .one{ height:20px; width:20px; background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="one"></div> <button id="btn">Button</button> 

Answer 1

您必须将事件与$(document)绑定，因为它不是静态的。

var btn = $("#btn");
var btn2 = $("#btn2");
var one = $(".one");

$(document).on("click","#btn",function(){

  one.css("background-color","black");
  btn.attr("id","btn2").text("Buton2");

});
$(document).on("click","#btn2",function(){

  one.css("background-color","green");
  $(this).attr("id","btn").text("Button");
});

看这里

Answer 2

这应该有帮助

var btn = $("#btn");

var one = $(".one");

btn.on("click",function(){

one.css("background-color","black");
btn.attr("id","btn2").on( "click", function(){

one.css("background-color","green");
btn2.attr("id","btn").text("Button");
});
});

希望这会有所帮助

快乐学习

Answer 3

您假设更改元素ID将与在加载时执行的代码链接，在加载时该ID搜索了某些元素。 实例化时，btn2为空。 之后运行的代码将永远不会及时返回并解决此问题，您应该考虑使用一种更加“事件驱动”的javascript方法。 认为.on（'click'）具有点击后的便利性，而不是在编写代码时;）

 var btn = $("#btn"); var btn2 = $("#btn2"); // this does not exist var one = $(".one"); var clickTwo = function(){ alert('CLICK 2!'); one.css("background-color","black"); btn.attr("id","btn2").text("Buton2");// this does not retroactively create the #btn2 element, //much less the btn2 reference } var clickOne = function(){ one.css("background-color","black"); $(this).attr("id","btn2").text("Buton2"); $(this).on('click', clickTwo) alert('btn2 does not actually exist: length of jQuery selection is ' + btn2.size()); } btn.one("click", clickOne); 

 .one{ height:20px; width:20px; background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="one"></div> <button id="btn">Button</button> 

Answer 4

本示例介绍了使用按位XOR运算符^交替单个HTMLElement的对象属性值（1,0,1，...）来切换两个函数或值的每种情况。

 function aFn(el){ $(el).text("AAAAAAA"); } function bFn(el){ $(el).text("BBBBBBB"); } function tog(){ var io = this.io ^= 1; // 1/0 Toggler; El Obj Property // Example using the `io` with Ternary Operator $(".one").css("background-color", io ? "black" : "green"); // Example using `io` to toggle two functions [aFn, bFn][io]( this ); // If you need to toggle the ID: this.id = io ? "btn2" : "btn" } // Incredible, even if we change ID all you need is: $("#btn").on('click', tog); 

 .one{ height:20px; width:20px; background-color:red; } #btn{} #btn2{padding:10px; border:4px solid gold;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="one"></div> <button id="btn">Button</button>