(Consulta) Cargar contenido una sla vez y de un solo item

[opzina]

Tengo las letras del abcdario o alfabeto.

Al hacer click en una de ellas, me debe mostrar un listado de palabras.

Cuando sucede el primer evento click funciona adecuadamente.
Ej. click en letra a, muestra 'Asc', 'After', 'Asns'.

Aunque si luego hago click en B, me muestra las letras de A y se agregan las de B. Este comportamiento quiero evitar.

Necesito que al hacer click en A muestra letras de A, Al hacer click en B, muestre las de B.

Como aplico esta restricción?

Código HTML:

<ul class="abc">
                    <li><a rel="0" href="#">A</a></li>
                    <li><a rel="1" href="#">B</a></li>
                    <li><a rel="2" href="#">C</a></li>
</ul>
 

Código Javascript:

<script type="text/javascript">
    $(document).ready(function() {
        
        var words = [
                a = ['Asc', 'After', 'Asns'],
                b = ['Basic'],
                c = ['Calc', 'Composite']
            ];    
        
        var destino = $('#words ul');
        var lista = $('.abc li');
        
        lista.click(function(event) {    
            event.preventDefault();
            
            //Add and remove "active" css class.
            $(this).addClass('active').siblings().removeClass('active');
            
            // Get rel atribute value.
            var abc = $(this).children().attr('rel');
            
            $(this).each(function() {
                for(var i = 0; i < words.length; i++) {
                    if(abc == i) {
                        for(var word = 0; word < words[i].length; word++) {
                            destino.append('<li><a href="#">' + words[i][word] + '</a></li>');
                        }
                    }
                }
 
            });
        });
 
    });
</script>
 

[doylelives]

El problema es que estan utilizando el metodo append, el cual agrega datos manteniendo los que ya posee. Tu deberias reemplazar el dato por el clickeado.
Usa el metodo html() en vez de append().

[opzina]

Gracias.

Ahora imprime sólo un resultado, el último.

Esto es porque hay un if dentro? Debo concanetar?

[doylelives]

Cambiando append(....) por html(...), tu codigo esta mostrando solo las palabras de la letra clickeada, No es ese comportamiento el que deseas?

[gebremswar]

Hola opzina, que tal.

La solución que te da doylelives, no es exactamente la más adecuada para el código javascript que nos muestras.

Y te muestra solo el ultimo que los resultados porque .html() reemplaza lo que hay antes y es por eso que solo te queda la ultima impresión. En cada ciclo del for imprimirá reemplazando lo que había antes y finalmente te quedará lo ultimo impreso.

La solución para tu caso, sin modificar nada más, es agregar en la linea 21 del codigo javascript que proporcionaste la siguiente linea de código:

Código Javascript:

destino.empty();
 

Que lo unico que hace es limpiar, o restaurar a como estaba inicialmente y asi poder imprimir con el <ul></ul> destino siempre vacío. Puedes usar otros métodos, pero estoy seguro que lo indicado te funcionará.

Pruébalo y dinos que tal te fue.

[opzina]

Muchas Gracias,

Igualmente voy a probar con otro camino. Creo que va a ser mejor.

Saludos.

[opzina]

Les muestro cómo lo resolví, y acepto sugerencias, toda crítica me vendría como anillo al dedo.

Código Javascript:

<script type="text/javascript">
 
    $(document).ready(function() {
        
        // Información.
        var words = [
                a = ['Asc', 'After', 'Asns'],
                b = ['Basic'],
                c = ['Calc', 'Composite'],
                d = ['Dino', 'Deno', 'Desert', 'Dynamic']
            ];    
        
        //Destino de la info.
        var destino = $('#words ul');
        
        //Letters Parent.
        var lista = $('.abc li');
    
        lista.click(function() {
            //Add and remove "active" css class.
            $(this).addClass('active').siblings().removeClass('active');
            // Obtengo la letra.
            var letter = $(this).children().attr('rel');
            // Obtengo las palabras para dicha letra.
            var word = words[letter];
            
            destino.empty();
            $(word).each(function(index) {
                
                var palabritas = $('<li><a href="#">' + word[index] + '</a></li>');
                destino.append(palabritas);
                
            })
            
        });
    });
</script>