Tengo algunos problemas para que funcione una función de alternar y necesito que alguien me ayude a explicarme.

Mi HTML (simplificado):

<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>

Mi jQuery (simplificada)

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

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

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

});

Como puede ver, estoy agregando el valor de los elementos seleccionados al div en la parte superior. Esto funciona bien, pero necesito que se elimine cuando vuelva a hacer clic.

Estoy bastante seguro de que necesita una función toggle (), pero hasta ahora mis intentos han sido bastante infructuosos.

Alguna orientación sería muy apreciada.

EDITAR: puede ver lo que quiero lograr en este JSfiddle. Funciona exactamente como lo quiero agregando un valor al final (como un enlace de ruta de navegación), pero no se elimina cuando hago clic de nuevo.

2
dangermark 1 jun. 2011 a las 08:57

4 respuestas

La mejor respuesta

Debe mirar el contenido de #filter_names y verificar si el valor de la etiqueta en la que se hizo clic ya está incluido, luego eliminarlo si lo está o agregarlo de otra manera:

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

Violín de trabajo: http://jsfiddle.net/passcod/Kz3vx/

Tenga en cuenta que puede obtener resultados extraños si el valor de una etiqueta está contenido en el de otra.

2
Félix Saparelli 1 jun. 2011 a las 05:15

Me gusta la solución de passcod: aquí hay una alternativa que envuelve los elementos en divs y los pone en orden alfabético.

JSFiddle aquí. La función de clasificación es de 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
g_thom 1 jun. 2011 a las 10:17
<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>
1
TheVillageIdiot 1 jun. 2011 a las 05:16

Prueba este ...

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

Esto agregará estas clases alternativamente cuando haga clic en div. o si solo desea eliminar esta clase en el segundo clic, debe escribir esto en su controlador de clics.

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

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

EDITADO -----
para eliminar el html adjunto, puede probar esto ...

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

Está funcionando AQUÍ

¡¡Espero que esto te ayude!!

0
Vivek 1 jun. 2011 a las 05:27