HTML-разметка внутри jquery

Question

Я хочу добавить значок рядом с текстом какой-либо ссылки, которая упрощает и сворачивает аккордеон. Текст уже меняется с «Больше» на «См. Меньше». увидеть рабочую демо-версию - http://bootply.com/106271

Поэтому добавление:

<span class="glyphicon glyphicon-chevron-up"></span> 

останавливает работу изменения текста.

Вот сломанная версия пытается добавить значок: http://bootply.com/106270

$(document).ready(function(){ 
    $("#morebtn").click(function(){ 
     $(this).html($(this).html() == "See more <span class="glyphicon glyphicon-chevron-up"></span>" ? "See less" : "See more <span class="glyphicon glyphicon-chevron-up"></span>"); 
    }); 
}); 

Answer 1

У вас есть несовпадение цитаты:

"See more <span class="glyphicon glyphicon-chevron-up" ... " 
^     ^       ^ ^

Чтобы это исправить , либо использовать одинарные кавычки, либо избегать двойных котировок:

'See more <span class=" ... " ... ' 

"See more <span class=\" ... \" ... " 

Working Bootply Demo.

Answer 2

.indexOf() Используйте, чтобы проверить наличие конкретного слова. А также иметь в виду, что не использовать " внутри строки, которая строится на " вместо этого использовать '

Try,

$(document).ready(function(){ 
    $("#morebtn").click(function(){ 
     $(this).html($(this).html().indexOf("See more") > -1 ? "See less" : "See more <span class='glyphicon glyphicon-chevron-up'></span>"); 
    }); 
    }); 

Answer 3

Переопределение все содержимое HTML веб-сайт с

$(this).hmtl(""); 

не правда хорошая идея.

Вместо того, чтобы использовать это, вы делаете это так:

$(document).ready(function() 
        { 
        $("#morebtn").click(function() 
             { 
              $("#morebtn").val($("#morebtn").val().indexOf("See more") === 1 ? 
                   $("#morebtn").val("See less") 
                   : $("#morebtn").val('See more <span class="glyphicon glyphicon-chevron-up"></span>')); 
             } 
           ); 
        } 
      ); 

Также стоит отметить, что эта линия не может работать:

"See more <span class="glyphicon glyphicon-chevron-up" 

Консоль JavaScript должен показывать вверх синтаксическая ошибка для этого. Потому что вы не можете использовать неявные те же цитаты, что и вы, избегая внутренних. Вы должны бежать ваши внутренние двойные кавычки, как это:

class=\"glyphicon glyphicon-chevron-up\" 

ИЛИ: Я настоятельно рекомендую вам использовать альтернативный метод с одинарными и двойными кавычками (порядок) материей это не распространяется, потому что подмигнул легче читаемые для люди. Это может быть одно или два раза):

'See more <span class="glyphicon glyphicon-chevron-up"></span>' 
// or: 
"See more <span class='glyphicon glyphicon-chevron-up'></span>" 

Надеюсь, это помогло вам.