jQuery переключает () текст в отдельном элементе

ProgramBox

jQuery переключает () текст в отдельном элементе

Post author:admin
Запись опубликована:21 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #toggle

#javascript #jquery #переключение

Вопрос:

У меня возникли некоторые проблемы с запуском функции переключения, и мне нужен кто-нибудь, кто поможет мне это объяснить.

Мой HTML (упрощенный):

 <div id="filter_names"></div>

<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
<div class="item">Option 4</div>

Мой jQuery (упрощенный)

 $(".item").click(function(){

  var tagname = $(this).html();
  $('#filter_names').append(' > ' tagname);

  $(".loading").show();

});

Как вы можете видеть, я добавляю значения элементов, на которые нажаты, в div вверху. Это работает нормально, но мне нужно, чтобы он удалялся при повторном нажатии.

Я почти уверен, что для этого нужна функция toggle (), но пока мои попытки были довольно бесплодными.

Я был бы весьма признателен за некоторые рекомендации.

РЕДАКТИРОВАТЬ: Вы можете видеть, чего я хочу достичь в этом JSfiddle. Он работает именно так, как я хочу, добавляя значение в конец (например, ссылку в виде хлебной крошки), но не удаляется, когда я нажимаю на него снова.

Ответ №1:

Вам нужно просмотреть содержимое #filter_names и проверить, включено ли уже значение тега, на который нажата кнопка, затем удалить его, если оно есть, или добавить в противном случае:

   if (filternames.indexOf(tagname) === -1) {
    $('#filter_names').append(' > ' tagname);
  } else {
    $('#filter_names').text(filternames.replace(' > ' tagname, ''));
  }

Рабочая скрипка:http://jsfiddle.net/passcod/Kz3vx /

Обратите внимание, что вы можете получить странные результаты, если значение одного тега содержится в значении другого тега.

Ответ №2:

 <script type="text/javascript">
$(function(){
    $(".item").click(function(){
        var $this=$(this);
        var tagname = ' > '  $this.html();
        //if has item-check class remove tag from filter_names
        if($this.hasClass("item-click")){
            var h=$("#filter_names").text();
            $("#filter_names").text(h.replace(tagname, '' ));
        }
        else{
            $('#filter_names').append(tagname);
        }
        $(this).toggleClass("item-click").toggleClass("item");
    });
});
</script>

Ответ №3:

попробуйте это…

  $(this).toggleClass("item-click item");

это добавит эти классы альтернативно, когда вы нажмете на div. или, если вы просто хотите удалить этот класс вторым щелчком мыши, вам следует написать это в вашем обработчике кликов.

 if( $(this).hasClass("item-click")){

     $(this).removeClass("item-click");
}

ОТРЕДАКТИРОВАНО ——

чтобы удалить добавленный html, вы можете попробовать это…

  if($(this).hasClass("item-click")){
            $("#filter_names").text("");
        }
        else{
            $('#filter_names').append(tagname);
        }

это работает ЗДЕСЬ

надеюсь, это поможет вам!!

1. Я считаю, что это убивает его после первого щелчка, потому что селектор больше не сможет найти исходный выбранный «.item»

2. Извините, это не то, что мне нужно. Мне нужно значение выбранного div «item», чтобы перейти к div «filter_names», а затем удалить его при повторном нажатии на div. toggleClass — это просто небольшая дополнительная функция, которая у меня есть, просто игнорируйте ее.

3. Все в порядке, я должен это удалить. В любом случае спасибо.

4. вы хотите удалить его при нажатии на тот же div или любой div с классом item?

Ответ №4:

Мне нравится решение passcod — вот альтернатива, которая обертывает элементы в divs и размещает их в алфавитном порядке.

JSFiddle здесь. Функция сортировки взята из http://www.wrichards.com/blog/2009/02/jquery-sorting-elements /.

 $(".item").click(function(){
    var tagname = $(this).html();
    var target = $('#filter_names').find('div:contains("> '   tagname   '")');
    if (target.is('*')) {
        target.remove();
    }
    else $('#filter_names').append('<div class="appended"> > '  tagname  '<div>');  
    function sortAlpha(a,b) {
        return a.innerHTML > b.innerHTML ? 1 : -1;
    }
    $('#filter_names div').sort(sortAlpha).appendTo('#filter_names');
});