Текст jQuery toggle() в отдельном элементе

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

Мой 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(), но пока мои попытки были довольно бесплодными.

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

EDIT: Вы можете увидеть, чего я хочу достичь в этом JSfiddle. Он работает именно так, как я хочу, добавляя значение в конец (например, ссылку на навигационную цепочку), но не удаляется, когда я снова щелкаю по нему.


javascript toggle jquery
person dangermark    schedule 01.06.2011    source источник
comment
см. мой обновленный ответ .. с демонстрацией   -  person Vivek    schedule 01.06.2011

Ответы (4)


arrow_upward
2
arrow_downward

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

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

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

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

person Félix Saparelli    schedule 01.06.2011
comment
Это идеально, спасибо, что объяснили это для меня. С каждым днем ​​я начинаю понимать jQuery все больше и больше. Большое спасибо. - person dangermark; 01.06.2011

arrow_upward
0
arrow_downward

Попробуй это...

 $(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);
        }

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

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

person Vivek    schedule 01.06.2011
comment
Я считаю, что это убивает его после первого щелчка, потому что селектор больше не сможет найти исходный .item, на который нажали. - person Sparky; 01.06.2011
comment
Извините, это не то, что мне нужно. Мне нужно значение элемента div, по которому щелкнули, чтобы перейти к div filter_names, а затем удалить его при повторном нажатии на div. ToggleClass — это просто небольшая дополнительная вещь, которую я там имею, просто игнорируйте ее. - person dangermark; 01.06.2011
comment
Все в порядке, я должен удалить это. Спасибо, в любом случае. - person dangermark; 01.06.2011
comment
вы хотите удалить его, когда вы нажимаете на тот же div или любой div с элементом класса? - person Vivek; 01.06.2011

arrow_upward
0
arrow_downward

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

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');
});
person g_thom    schedule 01.06.2011

arrow_upward

arrow_downward

person    schedule
comment
Почти готово... Нужно также удалить >. - person Alex R.; 01.06.2011
comment
@Alex R. Теперь он удаляет > как > Item 1 > Item 2 > Item 3, если вы нажмете Item 1, он #filter_names будет иметь > Item 2 > Item 3 - person TheVillageIdiot; 01.06.2011