javascript - Bagaimana untuk mengubah suai kelas elemen selepas menetapkannya menggunakan bootstrap?
phpcn_u1582
phpcn_u1582 2017-05-18 10:47:55
0
5
718

Saya menetapkan kelas elemen, dan sekarang saya mahu menukar kelas elemen melalui JavaScript saya mencuba attr jQuery untuk mengubah suai atribut kelas, tetapi ia tidak berfungsi.
html:

<nav>
    <ul class="pager" id="pageCtr">
        <li class="previous" id="prevBTN">
            <a href="#" onclick="prevPage()"><span>&larr;</span>前一页</a>
        </li>
    </ul>
</nav>

js:

$('#prevBTN').className='previous disabled';
phpcn_u1582
phpcn_u1582

membalas semua(5)
某草草

Unsur hipotesis

<p class="className" id="idValue"></p>

Anda boleh mengubahnya seperti ini

var e = document.getElementById('idValue')
if (e) {
    e.className = "changedClassName"
}

Dicuba dan diuji.

jQuery hanya document.getElementById('idValue')改成$('#idValue') dan sudah sedia

黄舟

HTML:

<p id="id_test" class="old-bootstrap">

JS:

$('#id_test').className='new_class';

Bukan melalui attr, tetapi melalui classNameattr,而是通过className

PS:
如果你想为li添加属性disabled可以这样做,不是添加class而是attr
$('#prevBTN').attr('disabled', true);

去除attr:

方案1:a标签不支持disabled属性,所以你把a标签换成button标签就可以了:http://www.w3school.com.cn/ti...
方案2:用a标签也可以,去除它的href属性就可以实现不能点击的效果,即$('#prevBTN').removeAttr('href');
PS: Jika anda ingin menambah atribut disabled pada li, anda boleh melakukan ini, bukannya menambah class > tetapi attr:$('#prevBTN').attr('disabled', true);

Alih keluar attr: #🎜🎜#
#🎜🎜##🎜🎜#Pilihan 1: #🎜🎜#Teg a tidak menyokong atribut yang dilumpuhkan, jadi anda boleh menggantikan teg dengan teg butang: http://www.w3school.com. cn/ ti...#🎜🎜##🎜🎜#Pilihan 2#🎜🎜#: Anda juga boleh menggunakan teg dan mengalih keluar atribut hrefnya untuk mencapai kesan yang tidak boleh diklik, iaitu $( '#prevBTN'). removeAttr('href');#🎜🎜##🎜🎜#Rujukan: #🎜🎜#Anda letakkan kod berikut pada ini dan jalankannya#🎜🎜##🎜🎜#
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function test() {
    $('#id_test').removeAttr('href');
}

</script>
</head>

<body>
<nav>
    <ul class="pager" id="pageCtr">
        <li class="previous" id="prevBTN">
            <a href="#" id="id_test" onclick="prevPage()"><span>&larr;</span>前一页</a>
        </li>
    </ul>
</nav>
<button id="id_test2" onClick="test()">disable</button>
</body>
</html>
刘奇

Apakah kod poster asal?
Mengapa saya boleh menggunakan attr() terus untuk menetapkan kelas?

Selain itu, jQuery juga mempunyai dua kaedah: addClass() dan removeClass Saya biasanya menggunakan dua kaedah ini untuk mengendalikan kelas.

黄舟

jQuery mempunyai kaedah khas untuk kelas pengendalian, anda boleh menyemak API yang berkaitan

淡淡烟草味

Terima kasih kepada @daryl dan @tony_yin atas jawapan mereka yang bersemangat, saya mahu menggunakannya sendiri. dengan <butang> boleh mencapai kesan melumpuhkan butang, tetapi gaya lalai BootStrap .pager akan berubah
ubah <li class= "previous" id=' prevBTN'> Gantikan dengan <li class="previous disabled" id='prevBTN'> Gunakan document.getElementById('prevBTN' ).className='previous disabled'; sememangnya boleh dilaksanakan, tetapi akan ada masalah apabila menggunakan jQuery $('prevBTN').className='previous disabled'; tidak boleh dilaksanakan. . Sebab utama ialah $ ('prevBTN') tidak boleh mendapatkan elemen DOM dan className ialah atribut dalam DOM $(selector) hanya boleh mendapatkan set Elemen DOM yang memenuhi syarat pemilih, <li> 标签里面的 <a> 换成 <button> ,能实现禁用按钮效果,但是 .pager 的 BootStrap 默认样式会变化;
<li class="previous" id='prevBTN'> 换成 <li class="previous disabled" id='prevBTN'> 使用 document.getElementById('prevBTN').className='previous disabled'; 确实可行,但使用 jQuery 时会出现问题,$('prevBTN').className='previous disabled'; 就不能实现,主要原因是 $('prevBTN') 并不能得到 DOM 元素,而 className 是 DOM 里面的属性,$(selector) 只能得到满足选择器条件 DOM 元素集合,

jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element.

解决方法:$('prevBTN').get(0).className='previous disabled';

jQuery() (atau $()) dengan pemilih id kerana hujahnya akan mengembalikan objek jQuery yang mengandungi koleksi sama ada sifar atau satu elemen DOM.#🎜🎜#
#🎜🎜#Penyelesaian: $('prevBTN').get(0).className='previous disabled';#🎜🎜#
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan