Как изменить значок, когда он только активен? - PullRequest
Новая
       46

Как изменить значок, когда он только активен?

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

В тот момент, когда по иконке (внутри класса) нажимают все те же значки, меняются.

Я пытался использовать $ (this). Это было предложено в других вопросах, но не играли в кости. 

<p>Elaine Thompson   <i class="material-icons add box">add_box

    </i></p>

    <span class='hideinfo'>
        <ul>

            <li><a href='mailto:example@example.co.uk'>example@example.co.uk</a></li><li>01224 732764</li><li>07739 745612</li>
                </ul>
                    </span>



<script>


$(document).ready(function() {

// Hide the "view" div.
$('span.hideinfo').hide();


$('i.add').on('click',function() {
  var icon = $('.box');
  icon.toggleClass('add');
  if (icon.hasClass('add') ) {
    icon.text('add_box');
    $('span.hideinfo').hide();

  } else {
    icon.text('indeterminate_check_box');
   $(this).next().slideToggle("slow");
    return false;

  }
});

});
</script>

Он должен меняться только в том случае, если значок активен. Затем он меняет Indeterminate_check_box, чтобы раскрыть информацию о человеке, а затем нажмите на нее еще раз, чтобы он изменился обратно на add_box и скрыть информацию. Есть намеки?

1 Ответ

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

Вы хотите использовать $(this), чтобы просто работать с отдельным элементом <i>, по которому щелкнули, и при этом использование $(this).next().slideToggle() ничего не переключит, так как <i> встроен в<p> (он попытается выбрать следующий элемент в элементе <p>, которого там нет), вместо этого сначала нужно выбрать родительский элемент <p> (я использовал .parent(), но вы могли бы сделать .closest('p') или что-то вместо этого), затем выберите следующий элемент и slideToggle это. 

<script>
  $('.hideinfo').hide();

  $('i.add').click(function() {
    $(this).toggleClass('add').text(
      $(this).hasClass('add') ? 'add_box' : 'indeterminate_check_box'
    ).parent().next().slideToggle();
  });
</script>

https://jsfiddle.net/5p3mu1db/

...