javascript - Tanya soalan tentang perkara ini dalam JS.
滿天的星座
滿天的星座 2017-07-05 10:49:51
0
7
839

Mengapa acara onclick tidak dicetuskan di tempat ini? Jika anda boleh mendapatkan objek DOM li yang sedang diklik dalam jquery, tidakkah ia boleh digunakan dalam JS seperti ini?

$(document).ready(function(){
    $("ul li").click(function(){
        console.log($(this));//打印出当前被点击的li的jquery对象
        console.log(this);//打印出当前被点击的li的dom对象
    });
});
window.onload = function(){
    var lis = document.getElementsByTagName("li");
    lis.onclick = function(){
        console.log("111");
        console.log(this);
    }
}

Pengubahsuaian:

window.onload = function(){
    var lis = document.getElementsByTagName("li");
    Array.from(lis).forEach(function(el) {
        console.log("111");
        console.log(this);
    })
}
<p>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</p>

Terima kasih semua, saya menggunakan jquery sebelum ini, tetapi sekarang saya melihat js semula dan mendapati banyak masalah. Saya tidak akan membuat kesilapan bodoh seperti ini lagi pada masa akan datang, saya sangat kagum ^_^.

滿天的星座
滿天的星座

membalas semua(7)
滿天的星座

Bolehkah anda mengklik untuk mencetuskan acara ini? Saya boleh menggunakan segmentFault.


Tetapi terdapat sedikit masalah dengan kod anda getElementsByTagName mengembalikan objek seperti tatasusunan

Anda harus melintasinya dan kemudian tetapkan nilai onclick pada setiap elemen

大家讲道理

bukan sebab this.

onclick 是 DOM 的事件。但是此时的 lis Ia bukan dom sama sekali, tetapi koleksi DOM.

jQuery boleh mengendalikannya kerana $("ul li") mengembalikan objek jQuery Apabila fungsi klik dipanggil padanya, jQuery secara tersirat akan menggunakan gelung.

Walaupun fungsi lis 很像数组,但是却不是数组。因此可以使用 Array.from mengubahnya menjadi tatasusunan sebenar.

window.onload = function(){
    var lis = document.getElementsByTagName("li");
    Array.from(lis).forEach(function(el) {
        console.log("111");
        console.log(this);
    })
}
学习ing

lis = document.getElementsByTagName("li") mendapat tatasusunan.
Bagaimana anda harus mengikat acara?

阿神

Cuba jangan gunakan .onclick() untuk menulis acara klik; gunakan addEventListener('click', function(){console.log(this)}); adalah kerana anda mendapat lis Adakah onclick tatasusunan tidak berfungsi atas sebab ini?

为情所困

Sekeping kod kedua ditulis dengan salah lis ialah tatasusunan, bukan objek dom, jadi tetapan onclick tidak berguna
Tukar kepada ini

.
window.onload = function(){
    var lis = document.getElementsByTagName("li");
    Array.from(lis).forEach((li) => {
        li.onclick = function(){
            console.log("111");
            console.log(this);
        }
    })
}
为情所困

Gunakan getElementsByClassName这个方法吧,把getElementsByTagName untuk membungkusnya terus dan ia boleh digunakan sebagai operasi dom

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
        oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\-");
    var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
    var oElement;
    for(var i=0; i < arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}
淡淡烟草味


Seperti yang ditunjukkan dalam gambar di atas, lis anda dicetak sebagai susunan objek Menurut idea anda, anda harus melintasi lis untuk mengikat onclick pada setiap objek li

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan