Estoy tratando de escribir JavaScript que mostrará / ocultará un párrafo cuando haga clic en una flecha. El problema es que estoy generando una lista de títulos y al lado de cada título hay una flecha. Esto se genera a través de un bucle en el servidor. Cuando se pasa, el código no tiene ID. Para resolver eso, ejecuté el siguiente javascript para crear ID:

var countPosts = document.getElementsByClassName("jobs-article-holder-content-whole-teaser").length;
var myNewID = "article-holder-dropdown-"
for (var i = 0; i < countPosts; i++) {
    myNewID = "article-holder-dropdown-" + (i + 1);
    document.getElementsByClassName("jobs-article-holder-content-whole-teaser")[i].setAttribute("id", myNewID);
}

Html es

loop
        <div class="jobs-article-holder-content-page">
            <div class="jobs-article-holder-content-whole">
                <div class="jobs-article-holder-content-whole-box">
                    <h3>$MenuTitle.RAW</h3>
                    <div class="job-article-holder-click-for-more-link">
                        &#x25B2;
                    </div>
                </div>
                <div class="jobs-article-holder-content-whole-teaser show">
                    <p class="jobs-article-holder-content-whole-teaser-content">$Teaser</p>
                </div>
            </div>
        </div>
end loop

Para darle una imagen: ingrese la descripción de la imagen aquí

Ahora estoy tratando de averiguar cómo puedo hacer clic en una flecha y hacer que el contenido se oculte / muestre si no conozco los ID. ¿Algunas ideas?

Editar:

Una cosa que parece que no puedo evitar es que la flecha está dentro de un div, donde el párrafo está dentro de otro, ¿cómo cambio la flecha y oculto el div? Pasar (esto) puede afectar solo a la flecha, ¿cómo puedo ir desde allí para afectar el párrafo?

2
Bojan 31 ago. 2014 a las 09:56

2 respuestas

La mejor respuesta

Use CSS para controlar el elemento mostrar / ocultar:

.jobs-article-holder-content-whole-teaser.hide {
    display: none;
}

.jobs-article-holder-content-whole-teaser.show {
    display: block;
}

Y tome el control de click con jQuery:

$(function () {
    $('.job-article-holder-click-for-more-link').on('click', function () {
        $(this).closest('.jobs-article-holder-content-whole')
            .find('.jobs-article-holder-content-whole-teaser')
                .toggleClass('show hide');
    });
});

jsFiddle Demo .


Si sus elementos generados por JavaScript, necesita delegación de eventos:

$(function () {
    $('body').on('click', '.job-article-holder-click-for-more-link', function () {
        $(this).closest('.jobs-article-holder-content-whole')
            .find('.jobs-article-holder-content-whole-teaser')
                .toggleClass('show hide');
    });
});

jsFiddle Demo .

4
dashtinejad 31 ago. 2014 a las 06:13

Puede acceder a <p> de la siguiente manera:

$(document).on("click",".job-article-holder-click-for-more-link",function(){
  $(this).parent().next().find("p");
}).
1
T J 31 ago. 2014 a las 06:11