2016-07-27 2 views
0

У меня есть 3 кнопки - btn 1, 2 и 3 - каждая из них назначена для каждой из них. Я хочу, чтобы кнопка 1 имела функцию 1 по умолчанию. Но при нажатии кнопки 2 функция кнопки 1 должна переключиться на функцию 4. При нажатии кнопки 3 кнопка 1 снова должна быть назначена на функцию 1. Поэтому кнопки 2 и 3 имеют свои собственные функции, но они также должны включить функцию кнопки 1. кода:функции связывания и развязки

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 

<button id="button1">button 1</button> 
<button id="button2">button 2</button> 
<button id="button3">button 3</button> 

<script> 
document.getElementById("button1").addEventListener("click", myFunction1); 

function myFunction1() { 
alert ("1"); 
} 

document.getElementById("button2").addEventListener("click", myFunction2); 

function myFunction2() { 
alert ("2"); 
} 

document.getElementById("button3").addEventListener("click", myFunction3); 

function myFunction3() { 
alert ("3"); 
} 
</script> 

<script> 
function myFunction4() { 
alert ("4"); 
} 
</script> 


</body> 
</html> 
+1

Почему у вас есть jQuery, отмеченный, когда нет jQuery? – rottenoats

ответ

0

вы можете использовать, если заявления назначить то, что вы хотите функцию, чтобы сделать с помощью чисел:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<body> 
 

 
<button id="button1">button 1</button> 
 
<button id="button2">button 2</button> 
 
<button id="button3">button 3</button> 
 

 
<script> 
 
document.getElementById("button1").addEventListener("click", myFunction1); 
 
var functionType = 1; 
 
function myFunction1() { 
 
    if(functionType == 1){ 
 
    alert("1"); 
 
    } else if(functionType == 4){ 
 
    myFunction4(); 
 
    } 
 
} 
 

 
document.getElementById("button2").addEventListener("click", myFunction2); 
 

 
function myFunction2() { 
 
alert ("2"); 
 
functionType=4; 
 
} 
 

 
document.getElementById("button3").addEventListener("click", myFunction3); 
 

 
function myFunction3() { 
 
alert ("3"); 
 
functionType=1; 
 
} 
 
    
 
    function myFunction4() { 
 
alert ("4"); 
 
} 
 
</script> 
 

 
<script> 
 

 
</script>

PS: Вы также можете использовать логическое значение (true/false) для functionType, но если вы планируете добавить больше функциональности, я бы использовал числа.

+0

Не забудьте подтвердить этот ответ и пометить его как ответ, если это вам поможет: P –

+1

Спасибо, Ник, он работает. Большой! –

1

Использование removeEventListener в function2 и FUNCTION3, а затем присоединить надлежащую функцию с addEventListener

function myFunction2() { 
    document.getElementById("button1").removeEventListener("click", myFunction1); 
    document.getElementById("button1").addEventListener("click", myFunction4); 
} 

function myFunction3() { 
    document.getElementById("button1").removeEventListener("click", myFunction4); 
    document.getElementById("button1").addEventListener("click", myFunction1); 
} 
+0

Спасибо, МАКС, ты гений! –

Смежные вопросы