Я хочу изменить содержимое кнопки при нажатии - в частности, я хочу, чтобы она перешла в состояние «блока», когда ее нельзя щелкнуть, в то время как я хочу присвоить ей Glyphicon.

Что хочу добавить:

<span class="glyphicon glyphicon-saved" aria-hidden="true"></span>

И текст «Загружено» - я хочу, чтобы это стерло предыдущий текст и значок Glyph, и я нашел этот маленький кусочек jQuery, который изменял текст при нажатии.

<script>
$(document).ready(function(){
$('#download-btn').click(function() {
 $("#download-btn").text('Downloaded');
})
});    
</script>

Но он не позволял мне добавлять какой-либо HTML-код, он просто выводил его как чистый текст.

И наконец, я хочу добавить к кнопке следующий стиль btn-block.

Это кнопка перед нажатием;

<button id="download-btn" type="button" class="center btn btn-primary">
    <span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download
</button>

После щелчка, указанный выше jQuery изменил текст на «Загружено», но я не могу понять, как добавить стиль и код к тегу.

0
Albert MN. 29 Окт 2015 в 22:33

2 ответа

Лучший ответ

С jQuery:

  • Вы можете изменить HTML-элементы с помощью .html ()
  • Вы можете изменить стили элементов с помощью .css ()
  • Для изменения классов вы можете использовать .addClass () и . removeClass ()

Есть еще много функций jQuery для манипулирования DOM.

Предлагаю взглянуть. jQuery API

1
Mr. Meeseeks 29 Окт 2015 в 19:37

Используйте .html(), чтобы применить / переопределить HTML, который находится внутри выбранного вами элемента.

Вы можете отключить кнопки несколькими способами. Я использовал .attr() или вы можете использовать .prop().

$('#download-btn').click(function() {
   $(this).html('<span class="glyphicon glyphicon-ok"></span> Downloaded').attr('disabled', true); 
});

jsFiddle Пример

1
Wild Beard 29 Окт 2015 в 19:42