Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
javascript - Wie ändere ich die Klasse eines Elements, nachdem ich es mit Bootstrap festgelegt habe?
phpcn_u1582
phpcn_u1582 2017-05-18 10:47:55
0
5
717

Ich habe die Klasse eines Elements festgelegt und möchte nun die Klasse des Elements über JavaScript ändern. Ich habe versucht, das Klassenattribut mit jQuery zu ändern, aber es hat nicht funktioniert.
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

Antworte allen(5)
某草草
某草草2017-05-18 10:49:55 5 Etage

假设元素

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

可以这样改

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

屡试不爽。

jQuery把document.getElementById('idValue')改成$('#idValue')就好啦

Wie +0
Antwort hinzufügen
黄舟
黄舟2017-05-18 10:49:55 4 Etage

HTML:

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

JS:

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

不是通过attr，而是通过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');
参考：你把下面这段代码拿到这个上面运行

<!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>
Wie +0
Antwort hinzufügen
刘奇
刘奇2017-05-18 10:49:55 3 Etage

楼主的代码是怎样的？
为什么我这里直接用attr()来设置class是可以的呢？

另外，jQuery还有addClass()和removeClass这两个方法，操作class 我一般用这两种方法。

Wie +0
Antwort hinzufügen
黄舟
黄舟2017-05-18 10:49:55 2 Etage

jQuery有专门操作class的方法，可以查下相关API

Wie +0
Antwort hinzufügen
淡淡烟草味
淡淡烟草味2017-05-18 10:49:55 1 Etage

感谢 @daryl 和 @tony_yin 的热心解答，我自己也想用吧 <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';

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage