recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Comment intégrer des variables dans l'attribut class d'une balise HTML

        var id = snapshot.val().id;
        var content = snapshot.val().content;
        var textObj = '<p class="task-item">\
                        <input type="checkbox" />\
                        <span class="ui-icon ui-icon-clock"></span>\
                        <span class="task-content">'+content+'</span>\
                        <span class="task-detail">&nbspdetail</span>\
                        </p>';

Je souhaite ajouter la variable id (qui est un nombre) dans la première ligne à l'attribut class de la balise p dans la troisième ligne. Peut-elle être intégrée directement ?

巴扎黑巴扎黑2710 Il y a quelques jours909

répondre à tous(4)je répondrai

  • ringa_lee

    ringa_lee2017-06-26 10:54:52

        var id = snapshot.val().id;
        var content = snapshot.val().content;
        var textObj = '<p class="task-item'+id+'">\
                        <input type="checkbox" />\
                        <span class="ui-icon ui-icon-clock"></span>\
                        <span class="task-content">'+content+'</span>\
                        <span class="task-detail">&nbspdetail</span>\
                        </p>';

    répondre
    0
  • typecho

    typecho2017-06-26 10:54:52

    L'essence de votre question est de savoir comment modifier le modèle HTML épissé. L'essence est d'épisser les chaînes.
    La méthode la plus stupide

    var textObj1 = '<p class="task-item"';
    var textObj2 = '>\
                        <input type="checkbox" />\
                        <span class="ui-icon ui-icon-clock"></span>\
                        <span class="task-content">'+content+'</span>\
                        <span class="task-detail">&nbspdetail</span>\
                        </p>';
    textObj = textObj1 + id + textObj2

    Ou utilisez directement le modèle de chaîne ES6, qui est plus conforme à votre imbrication de variables. Mais il y aura des problèmes de compatibilité.

    var textObj = `<p class="task-item${id}">\
                            <input type="checkbox" />\
                            <span class="ui-icon ui-icon-clock"></span>\
                            <span class="task-content">'+content+'</span>\
                            <span class="task-detail">&nbspdetail</span>\
                            </p>`;

    répondre
    0
  • 巴扎黑

    巴扎黑2017-06-26 10:54:52

    Puisque vous concaténez des chaînes à l'aide de JS, il en va de même si vous utilisez directement JS+将字符串拼接进去。
    既然你都知道怎么把content拼接进去了,那拼接id

    ES5

    var id = snapshot.val().id;
    var content = snapshot.val().content;
    var textObj = '<p class="task-item' + id + '">\
        <input type="checkbox" />\
        <span class="ui-icon ui-icon-clock"></span>\
        <span class="task-content">' + content + '</span>\
        <span class="task-detail">&nbspdetail</span>\
    </p>';

    Bien sûr, vous pouvez également utiliser des chaînes de modèle ES6, mais il y aura des problèmes de compatibilité avec les navigateurs, comme suit : (Remarque, l'intégralité du

    est terminée) textObj`开始,以`

    ES6

    var id = snapshot.val().id;
    var content = snapshot.val().content;
    var textObj = `<p class="task-item${id}">\
        <input type="checkbox" />\
        <span class="ui-icon ui-icon-clock"></span>\
        <span class="task-content">${content}</span>\
        <span class="task-detail">&nbspdetail</span>\
    </p>`;

    répondre
    0

  • 我想大声告诉你

    我想大声告诉你2017-06-26 10:54:52

    Ajoutez un attribut, essayez-le

    répondre
    0
  • Annulerrépondre