Как заставить HTML-фрагмент последовательно переключаться? - PullRequest
Новая
       2

Как заставить HTML-фрагмент последовательно переключаться?

0 голосов
/ 23 октября 2019

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

https://jsfiddle.net/jnqbxLgs/1/

HTML 

<a href="#">
  <div class="toggle-list">
   Hide list <i class="fa fa-angle-double-up"></i>
  </div>
</a>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

jQuery 

$(".toggle-list").on("click", function() {
    var updateText = $(this).find(".toggle-list");
    updateText.text(updateText.html() == 'Hide List <i class="fa fa-angle-double-up"></i>'
  ? 'Show List <i class="fa fa-angle-double-down"></i>'
  : 'Hide List <i class="fa fa-angle-double-up"></i>'
  );   

  console.log("Toggle the list");

  $("ul").toggle();

    $("i.fa").addClass("fa-hover");

});

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

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

1 Ответ

0 голосов
/ 23 октября 2019

Я уверен, что вы можете преобразовать оператор if в троичный, как в вашей версии, но сейчас это должно соответствовать вашим потребностям 

$(".toggle-list").on("click", function() {

    console.log("Toggle the list");
    $("ul").toggle();

    var toggletext = $(".toggle-list").text();

    if (toggletext.toLocaleLowerCase().indexOf("hide list") >= 0) {
        $(".toggle-list").html('Show List <i class="fa fa-angle-double-down"></i>');
    } else {
        $(".toggle-list").html('Hide List <i class="fa fa-angle-double-up"></i>');
    }

});
...