Question

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

＆＃13;

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");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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");
});

SEE Here

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

此示例涵盖了通过使用Bitwise XOR运算符^交替使用单个HTMLElement的对象属性值（1,0,1，...）来切换两个函数或值的每种情况。

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Jquery同一个按钮功能不同

4 个答案: