Есть ли способ переключаться между двумя кнопками, которые содержат текст, некоторые из которых должны быть выделены жирным шрифтом и курсивом - PullRequest
Новая
       58

Есть ли способ переключаться между двумя кнопками, которые содержат текст, некоторые из которых должны быть выделены жирным шрифтом и курсивом

0 голосов
/ 01 апреля 2020

По сути, я хочу иметь два блока текста (с форматированием), которые действуют как кнопки, которые переключаются назад и вперед от одного к другому при нажатии.

Это первый способ, который я попробовал: 

<style>
button {
    padding: 5px 10px;
    font-size: 1em;
    font-family: Crimson text;
    background-color: rgba(255, 255, 255, .5);
    text-align: left;
    font-weight: 400;
}


<script>
$(document).ready(function(){
    $("button").click(function(){
        $(this).text($(this).text() == "I want this BOLD" ? "I want this ITALIC" : "I want this BOLD");
    });
});


<body>
    <button type="button">I want this <b>BOLD</></button>
</body>

И это второй способ, который я пробовал: 

<button data-text-swap="I want this ITALIC">I want this <b>BOLD</b></button>

<script>
$("button").on("click", function() {
  var el = $(this);
  if (el.text() == el.data("text-swap")) {
    el.text(el.data("text-original"));
  } else {
    el.data("text-original", el.text());
    el.text(el.data("text-swap"));
  }
});
</script>

Оба способа проигрывают все форматирование текста после нажатия.

...