Текст jQuery toggle () в отдельном элементе - PullRequest
Новая
       10

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

2 голосов
/ 01 июня 2011

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

Мой 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 .Он работает именно так, как я хочу, добавляя значение в конец (например, ссылку крошки), но не удаляется, когда я нажимаю его снова.

Ответы [ 4 ]

2 голосов
/ 01 июня 2011

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

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

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

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

1 голос
/ 01 июня 2011 
<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>
0 голосов
/ 01 июня 2011

Мне нравится решение passcod - вот альтернатива, которая упаковывает элементы в 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');
});
0 голосов
/ 01 июня 2011

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

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

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

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

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

EDITED -----
, чтобы удалить добавленный HTMLВы можете попробовать это ... 

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

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

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

...