简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Comment modifier la classe d'un élément après l'avoir défini à l'aide de Bootstrap?
phpcn_u1582
phpcn_u1582 2017-05-18 10:47:55
0
5
676

J'ai défini la classe d'un élément, et maintenant je veux changer la classe de l'élément via JavaScript. J'ai essayé l'attr de jQuery pour modifier l'attribut de classe, mais cela n'a pas fonctionné.
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

répondre à tous(5)
某草草
某草草2017-05-18 10:49:55 5 plancher

Éléments hypothétiques

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

Vous pouvez le changer comme ça

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

Essayé et testé.

jQuery juste document.getElementById('idValue')改成$('#idValue') et c'est prêt

Comme +0
Ajouter une réponse
黄舟
黄舟2017-05-18 10:49:55 4 plancher

HTML :

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

JS :

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

Pas via attr, mais via 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 :Si vous souhaitez ajouter l'attribut disabled à li, vous pouvez le faire, au lieu d'ajouter class mais attr ：$('#prevBTN').attr('disabled', true);

Supprimer l'attribut : 🎜
🎜🎜Option 1 : La balise 🎜a ne prend pas en charge l'attribut désactivé, vous pouvez donc simplement remplacer la balise a par la balise bouton : http://www.w3school.com.cn/ti... 🎜🎜 Option 2🎜 : Vous pouvez également utiliser la balise a. En supprimant son attribut href, vous pouvez obtenir l'effet non cliquable, c'est-à-dire $('#prevBTN').removeAttr('href'); code>🎜🎜Référence : 🎜Vous mettez Obtenez le code suivant et exécutez-le🎜🎜 
<!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>
Comme +0
Ajouter une réponse
刘奇
刘奇2017-05-18 10:49:55 3 plancher

Quel est le code de l'affiche originale ?
Pourquoi puis-je utiliser directement attr() pour définir la classe ?

De plus, jQuery dispose également de deux méthodes : addClass() et removeClass. J'utilise généralement ces deux méthodes pour faire fonctionner les classes.

Comme +0
Ajouter une réponse
黄舟
黄舟2017-05-18 10:49:55 2 plancher

jQuery a des méthodes spéciales pour les classes d'exploitation, vous pouvez consulter l'API correspondante

Comme +0
Ajouter une réponse
淡淡烟草味
淡淡烟草味2017-05-18 10:49:55 1 plancher

Merci à @daryl et @tony_yin pour leurs réponses enthousiastes. Je souhaite l'utiliser moi-même. Remplacez <a> dans la balise <a> par . <button&gt ;, peut avoir pour effet de désactiver les boutons, mais le style par défaut de BootStrap de .pager changera ;
change<li class="previous" id='prevBTN'&gt ; Remplacer par <li class="précédent désactivé" id='prevBTN'> Utiliser document.getElementById('prevBTN').className ='previous désactivé'; C'est effectivement possible, mais il y aura des problèmes lors de l'utilisation de jQuery. $('prevBTN').className='previous désactivé'; ne peut pas être implémenté. la raison principale est que $('prevBTN ') ne peut pas obtenir l'élément DOM et que className est un attribut du DOM $(selector) ne peut obtenir que l'ensemble du DOM. les éléments qui répondent aux conditions du sélecteur, <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() (ou $()) avec un sélecteur d'identifiant comme argument renverra un objet jQuery contenant une collection de zéro ou d'un élément DOM.🎜
🎜Solution : $('prevBTN').get(0).className='previous désactivé';🎜
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！