suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript - Wie ändere ich die Klasse eines Elements, nachdem ich es mit Bootstrap festgelegt habe?

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_u1582phpcn_u15822749 Tage vor699

Antworte allen(5)Ich werde antworten

  • 某草草

    某草草2017-05-18 10:49:55

    假设元素

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

    可以这样改

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

    屡试不爽。

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

    Antwort
    0
  • 黄舟

    黄舟2017-05-18 10:49:55

    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>

    Antwort
    0
  • 怪我咯

    怪我咯2017-05-18 10:49:55

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

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

    Antwort
    0
  • 黄舟

    黄舟2017-05-18 10:49:55

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

    Antwort
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-18 10:49:55

    感谢 @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';

    Antwort
    0
  • StornierenAntwort