Necesito poder hacer clic en un div con una determinada clase y hacer que revele un elemento de lista con esa misma clase. Siento que debería ser simple, pero soy relativamente nuevo en jQuery. Estaba usando esto:

$('.minibox').on('click', function (){
    var txt = $(this).attr('name');
    $('ul').append("<li class='list'>"+txt+"</li>");
});

Pero quiero hacerlo sin el método append por varias razones. Creo que toggleClass es probablemente lo que estoy buscando, pero no estoy seguro de cómo usarlo en este contexto. También quiero poder hacer clic en '.minibox' nuevamente para eliminar el elemento de la lista, por lo que supongo que toggleClass es lo que estoy buscando.

Cualquier ayuda es apreciada <3

0
jfehrenbacher 14 dic. 2016 a las 00:45

2 respuestas

La mejor respuesta

Puede darle al elemento en el que se hizo clic un atributo que apunte al elemento de la lista que le gustaría alternar. Por ejemplo, si tu lista es así

<ul>
    <li class="first">something</li>
    <li class="second">something else</li>
<li>

Luego puede indicar en su botón la clase que le gustaría alternar así

<button data-target-toggle="first">click me!</button>

Y luego su controlador de clic podría leer los datos del botón y usarlos para seleccionar el elemento de la lista

$("button").click(function(){
    var targetClass = $(this).data("target-toggle");
    var targetElement = $("." + targetClass);
    //now you can do what you want to your targetElement, ie. show() or hide()
}
0
one stevy boi 13 dic. 2016 a las 21:59

Lo básico que necesitas:

var t = true;
$('.minibox').click(function (){
    var txt = $(this).attr('name');

    if(t==true)
    {
        $('ul').append("<li class='list'>"+txt+"</li>");
        t=false;
    }
    else
    {
        $('ul > .list').remove();
        t=true;
    }

});

Pero de mi lado, solo necesita ocultar y mostrar la lista completa de esta manera:

var t = true;
    $('.minibox').click(function (){
    	var txt = $(this).attr('name');

    	if(t==true)
        {
            $('.ul').find('li').text(txt);
    		$('.ul').show();
    		t=false;
    	}
    	else
        {
           $('.ul').find('li').text("");
    		$('.ul').hide();
    		t=true;
    	}
    	
    });
.ul{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul">
<li></li>
</ul>
<a href="#" class="minibox" name="Olala man">Click</a>

Eso es básico.

0
Ivijan Stefan Stipić 13 dic. 2016 a las 22:06