0

Я написал кусочек js скрипта, чтобы добавлять теги по нажатию, с проверкой на существующие элементы, а теперь хочу удалять по отжатию, но не понимаю какой функцией можно воспользоваться для проверки. Как мне объяснили, вложенные условия это не очень хорошо - соответственно хочется реализовать это более красиво и правильно. Загвоздка метода .replace в том, что если он не находит четко указаной строки, то он ничего и не сделает, а как определить есть ли там запятая без вложенного условия и дополнительной функции я не знаю.

$(document).ready(function() {
  $('.tags__item').one('click', function() {
          $(this).find('input').addClass('checked');
          var tag_value = $('#search-text').val();
          if ($('#search-text').val().length > 0) {
              tag_value = tag_value + ', ' + $(this).text().trim();
              $('#search-text').val(tag_value);
          } else if(tag_value.includes($(this) + ', ')){
              $('#search-text').val(tag_value.replace($(this) + ', ', ''));
              $('.tag input').prop( "checked", false );
          } else {
              tag_value = $(this).text().trim();
              $('#search-text').val(tag_value);
          }
      });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-form">
            <div class="search-form__field">
              <input id='search-text' type="text" placeholder="Enter search words...">
              <div class="search-form__clear"></div>
            </div>
            <div class="search-form__button">
              <button id="search-button" type="button">Найти</button>
            </div>
          </div>
       
        <div class="find-expert__tags">
          <ul class="tags">

            <li class="tags__item">
              <label class="tag">
                <input type="checkbox">
                <div></div>
                <span>ОДИН</span>
              </label>
            </li>

            <li class="tags__item">
              <label class="tag">
                <input type="checkbox">
                <div></div>
                <span>ДВА</span>
              </label>
            </li>

            <li class="tags__item">
              <label class="tag">
                <input type="checkbox">
                <div></div>
                <span>ТРИ</span>
              </label>
            </li>
          </ul>
</div>

1
  • удаляйте все, и склеивайте чекнутые заново. впрочем и по нажатию так же. а значение в data-атрибут внесите
    – teran
    30 ноя 2018 в 9:34

1 ответ 1

2

Вам что-то такое надо?

$(".tag").change(function(){
   var s = $(".tag:checked").get()
                  .map(v => $(v).data('tag'))
                  .join(', ');
   $("#search").val(s);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input id="search">


<label><input type="checkbox" class="tag" data-tag="раз"/>раз</label>
<label><input type="checkbox" class="tag" data-tag="два"/>два</label>
<label><input type="checkbox" class="tag" data-tag="три"/>три</label>

1
  • Да, спасибо:) но я уже воспользовался советом @teran 'a
    – QWD666
    30 ноя 2018 в 10:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.