JQuery одна и та же кнопка разные функции

Question

Вещь, которую я хочу, это <button> с идентификатором btn, чтобы изменить цвет при нажатии. Затем я хочу, чтобы он изменил идентификатор кнопки и тот же <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"); 
}); 

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

Вы предполагают изменение идентификатор элемента будет связать с кодом выполняемого во время загрузки, когда какой-то элемент искал этот идентификатор. Btn2 пуст при создании экземпляра. Код, который запускается после этого, никогда не вернется вовремя и не исправит это. Вы должны рассмотреть более «управляемый событиями» подход к javascript. Подумайте о том, что .он («щелчок») имеет consecuences после того, как была нажата, не тогда, когда вы пишете код;)

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

Этот пример охватывает каждый случай переключая две функции или значения путем чередования одного значения свойства объекта HTMLElement (1,0,1, ...) с помощью Побитового оператора XOR ^.

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>