JQuery → Новая функция щелчка идентификатора диапазона не отвечает

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

$(document).ready(function(){
  $('#openarrow').click(function(){
   var dsptmt = setTimeout(function(){ $('#usernameid').css('display', 'inline-block'); },1100);
   $('.chip').width('170');
   $('.arrow').removeClass('arright');
   $('.arrow').addClass('arleft');
   $('#openarrow').attr('id', 'closearrow');
  })

  $('#closearrow').click(function(){
    $('.arrow').removeClass('arleft');
    $('.arrow').addClass('arright');
    $('#usernameid').css('display', 'none');
    $('.chip').width('100');
    $('#closearrow').attr('id','openarrow');
  });
});

.chip {
  font-family: 'Abel', sans-serif;
  display: inline-block;
  padding: 0 25px;
  width:100px;
  height: 50px;
  font-size: 16px;
  color: blue;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
  transition: width, 2s ;
}

#usernameid {
    display:none;
}
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.arright {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arleft {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "row">
   <div class = "w3-container my-1 py-1 w3-light shadow" style = "position:relative;">
     <div class = "col-lg-9 col-md-6 col-sm-4">
       <div class = "chip">
         <div id = "usernameid" style = "color:darkblue;"> FULL NAME </div>
         <span id = "openarrow" class = "float-right"><a href = "#"><i class = "arrow arright"></i></a></span>
       </div>
     </div>
   </div>
</div>

Мне нужно, чтобы #closearrow возвращал все изменения к значениям по умолчанию, когда я нажимаю стрелку открытия и закрытия.

@FSDford спасибо за редактирование

— 21.12.2020 16:19

html jquery function click element

21.12.2020 02:29

Toor - Ангулярный шаблон для бронирования путешествий

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Разница между тегами Br и Wbr в HTML 5

В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...

HTML И VS CODE Для Веб-разработки

Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...

Как использовать WAI-ARIA

В моем текущем новом проекте почти все компоненты не учитывают веб-доступность. Моя нынешняя компания - это стартап, поэтому они не заботились о...

Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.

Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Эта проблема заключается в том, что при применении обработчика событий не существует элементов с идентификатором #closearrow. Если вы хотите сохранить эту парадигму, один из вариантов — использовать всплытие событий, чтобы по существу применить обработчик событий к .chip для элемента closearrow, поскольку .chip всегда будет существовать. См. ниже.

$(document).ready(function(){
  $('.chip').on('click', '#openarrow', function(){
   var dsptmt = setTimeout(function(){ $('#usernameid').css('display', 'inline-block'); },1100);
   $('.chip').width('170');
   $('.arrow').removeClass('arright');
   $('.arrow').addClass('arleft');
   $('#openarrow').attr('id', 'closearrow');
  })

  $('.chip').on('click', '#closearrow', function(){
    $('.arrow').removeClass('arleft');
    $('.arrow').addClass('arright');
    $('#usernameid').css('display', 'none');
    $('.chip').width('100');
    $('#closearrow').attr('id','openarrow');
  });
});

.chip {
  font-family: 'Abel', sans-serif;
  display: inline-block;
  padding: 0 25px;
  width:100px;
  height: 50px;
  font-size: 16px;
  color: blue;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
  transition: width, 2s ;
}

#usernameid {
    display:none;
}
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}

.arright {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arleft {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "row">
   <div class = "w3-container my-1 py-1 w3-light shadow" style = "position:relative;">
     <div class = "col-lg-9 col-md-6 col-sm-4">
       <div class = "chip">
         <div id = "usernameid" style = "color:darkblue;"> FULL NAME </div>
         <span id = "openarrow" class = "float-right"><a href = "#"><i class = "arrow arright"></i></a></span>
       </div>
     </div>
   </div>
</div>

Так хорошо .. восхитительное предложение, спасибо за выявление моей проблемы и вашу помощь

— 21.12.2020 02:49

Не могу остановить тайм-аут, используя: clearTimeout(dsptmt); какие-нибудь предложения, пожалуйста?

— 21.12.2020 16:48

Сделать из него исполняемый сниппет?

— 22.12.2020 00:18

@FSD для того же кода, когда я использую стрелку закрытия `$('.chip').on('click', '#closearrow', function(){ clearTimeout(dsptmt); $('.arrow').removeClass( 'arleft'); $('.arrow').addClass('arright'); $('#usernameid').css('display', 'none'); $('.chip').width(' 100'); $('#closearrow').attr('id','openarrow'); });`

— 22.12.2020 17:40

21.12.2020 02:40