javascript арқылы динамикалық түрде түймешіктің onclick функциясын өзгерту

Javascript арқылы динамикалық түрде түйменің әрекетін қалай өзгертуге болады?

Міне, мен:

Менде келесі түймелер бар:

<button class="num" onclick="getval(0)">0</button>
<button class="num" onclick="getval(1)">1</button>
<button class="num" onclick="getval(2)" >2</button>
<button class="num" onclick="getval(3)" >3</button>

function getval(){

...............

}

function getvalNew(){

..............

}

Клавиштерді getval() бастап getvalNew() мәніне ауысу және оны қайтадан қалпына келтіру үшін қалай жасауға болады?

3
@ FelixKling түсініктемесін неге кірістірілген оқиғалар өңдегіштерін пайдаланбау туралы түсініктемесін қараңыз, бірақ қажет болса, JS көмегімен элементтің onclick төлсипатын өзгертуге болады. Мен таза js-мен біраз ржильдім, бірақ сіз jQuery ('button.num') сияқты нәрсені көре аласыз. Attr ('onclick', 'myFunc (1)')); jQuery.
қосылды автор totallyNotLizards, көзі
@ FelixKling түсініктемесін неге кірістірілген оқиғалар өңдегіштерін пайдаланбау туралы түсініктемесін қараңыз, бірақ қажет болса, JS көмегімен элементтің onclick төлсипатын өзгертуге болады. Мен таза js-мен біраз ржильдім, бірақ сіз jQuery ('button.num') сияқты нәрсені көре аласыз. Attr ('onclick', 'myFunc (1)')); jQuery.
қосылды автор totallyNotLizards, көзі
Ішкі оқиғалар өңдегіштерін пайдаланбасаңыз, оңайырақ болады. Оқиғаларды өңдеу туралы қосымша ақпарат алу үшін quirksmode.org/js/introevents.html бөлімін қараңыз.
қосылды автор Felix Kling, көзі
Түрлі айнымалы немесе массивтермен немесе жаһандық шын фальцами бар қарапайым қосқыш әрекеті жұмыс істейді. Сондай-ақ, мұны тек содан кейін ғана басуыңызға болады. және onclick attr функциясын керісінше функция ретінде өзгертіңіз.
қосылды автор abc123, көзі
Түрлі айнымалы немесе массивтермен немесе жаһандық шын фальцами бар қарапайым қосқыш әрекеті жұмыс істейді. Сондай-ақ, мұны тек содан кейін ғана басуыңызға болады. және onclick attr функциясын керісінше функция ретінде өзгертіңіз.
қосылды автор abc123, көзі

10 жауаптар

Сіз осындай нәрсені жасай аласыз:

коды

$(".num").on("click", function() {
    if ($(this).hasClass("getval")) {
        $(this).removeClass("getval").addClass("getvalnew");
        //do what you need here 
        alert("getVal");
    } else {
        $(this).removeClass("getvalnew").addClass("getval");
        //do what you need here 
        alert("getValNew");
    }
});

FIDDLE

http://jsfiddle.net/ygqrU/

2
қосылды
function getval() {
    ........
    var buttons = document.getElementsByClassName("num");
    for (i=0;i<buttons.length;i++){
        buttons[i].onclick = function(){
            getvalNew();
        }
    }
}

Және керісінше басқа функция үшін. Кем дегенде, бұл жұмыс істеу керек.

2
қосылды
function getval() {
    ........
    var buttons = document.getElementsByClassName("num");
    for (i=0;i<buttons.length;i++){
        buttons[i].onclick = function(){
            getvalNew();
        }
    }
}

Және керісінше басқа функция үшін. Кем дегенде, бұл жұмыс істеу керек.

2
қосылды

blank.html үлгісіне негізделген тәсіл.

Ескерту: setAllFunc3-де сіз бірнеше элементтің бір элементіне тіркей аласыз. Сіз оларды таңдаулы түрде алып тастай аласыз. GetAllByClassName туралы басқа мүшенің жазбасын қараңыз.

Сондай-ақ, назар аударыңыз: өңдегішті қосу арқылы this var. Бұл қоңыраудың қай элемент тудырғанын білеміз. Тек мәтінді тек түймеден шығарып алдым. Сіз орнына төлсипаттың мәнін ала аласыз, содан кейін өңдеушіде пайдаланасыз. Мүмкін біраз уақыттан кейін біраз нәрсе білуге ​​болады. :)

<!DOCTYPE HTML>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i
</head>
<body>
    <button class="num" onclick="getval(0)">0</button>
    <button class="num" onclick="getval(1)">1</button>
    <button class="num" onclick="getval(2)">2</button>
    <button class="num" onclick="getval(3)">3</button>
    

    Simple method - using attributes
    <input type='button' onclick='setAllFunc1()' value='set all to "getval()"'/>
    <input type='button' onclick='setAllFunc2()' value='set all to "getvalNew()"'/>
    

    Better method - using addEventListener
    <input type='button' onclick='setAllFunc3()' value='set all to "myFunc3()"'/>
</body>
</html>
2
қосылды

blank.html үлгісіне негізделген тәсіл.

Ескерту: setAllFunc3-де сіз бірнеше элементтің бір элементіне тіркей аласыз. Сіз оларды таңдаулы түрде алып тастай аласыз. GetAllByClassName туралы басқа мүшенің жазбасын қараңыз.

Сондай-ақ, назар аударыңыз: өңдегішті қосу арқылы this var. Бұл қоңыраудың қай элемент тудырғанын білеміз. Тек мәтінді тек түймеден шығарып алдым. Сіз орнына төлсипаттың мәнін ала аласыз, содан кейін өңдеушіде пайдаланасыз. Мүмкін біраз уақыттан кейін біраз нәрсе білуге ​​болады. :)

<!DOCTYPE HTML>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i
</head>
<body>
    <button class="num" onclick="getval(0)">0</button>
    <button class="num" onclick="getval(1)">1</button>
    <button class="num" onclick="getval(2)">2</button>
    <button class="num" onclick="getval(3)">3</button>
    

    Simple method - using attributes
    <input type='button' onclick='setAllFunc1()' value='set all to "getval()"'/>
    <input type='button' onclick='setAllFunc2()' value='set all to "getvalNew()"'/>
    

    Better method - using addEventListener
    <input type='button' onclick='setAllFunc3()' value='set all to "myFunc3()"'/>
</body>
</html>
2
қосылды

Сіз функцияны көрсетуді өзгерткіңіз келгенде, шартты мәлімдемелермен jQuery синтаксисін бір сызықша арқылы орындауға болады.

//bind all
$('.num').bind('click', getValNew());

//Unbind all
$('.num').unbind('click');
2
қосылды

Браузер getElementsByClassName қолдамайтын болса, бұл балама:

var elems = document.getElementsByTagName('button');
for (i=0;i
1
қосылды

Браузер getElementsByClassName қолдамайтын болса, бұл балама:

var elems = document.getElementsByTagName('button');
for (i=0;i
1
қосылды

Мүмкін осындай нәрсе:

.

var button = document.getElementsByClassName("num")
// You could also do: var button = document.getElementsByTagName("button")

function set() {//Change all the buttons onclick event to getvalNew
    for (i = 0; i < button.length; i++) {
        button[i].onclick = function() {
            getvalNew(i)
        }
    }
}

function reset() {//Change all the buttons onclick event back to getval
    for (i = 0; i < button.length; i++) {
        button[i].onclick = function() {
            getval(i)
        }
    }
}
0
қосылды

Мүмкін осындай нәрсе:

.

var button = document.getElementsByClassName("num")
// You could also do: var button = document.getElementsByTagName("button")

function set() {//Change all the buttons onclick event to getvalNew
    for (i = 0; i < button.length; i++) {
        button[i].onclick = function() {
            getvalNew(i)
        }
    }
}

function reset() {//Change all the buttons onclick event back to getval
    for (i = 0; i < button.length; i++) {
        button[i].onclick = function() {
            getval(i)
        }
    }
}
0
қосылды