Estoy tratando de agregar leer más enlaces a diferentes secciones de una página de WordPress, que cuando se hace clic se espera que muestre los contenidos ocultos con CSS de forma predeterminada. A continuación hay un par de secciones en formato HTML. Necesito crear varias secciones similares.
Sección 1:
<p>What kinds of gifts should you give employees? <a class="more-link-pwp" href="#" data-more-link-id="1">Read More.</a></p> <div class="more-content-pwp" data-more-content-id="1">How much should you spend? Should corporate gifts for employees be company-branded? Our expert team will help you choose memorable, unique gifts for your employees and office staff.</div>Sección 2:
<p> Deepen employee engagement and impress new hires while giving employee gifts that are meaningful and memorable. <a class="more-link-pwp" href="#" data-more-link-id="2">Read More.</a></p> <div class="more-content-pwp" data-more-content-id="2">From empowering underserved women with job skills to supporting sustainability efforts every gift creates an impact. Our Impact Booklet showcases these inspiring stories, providing a unique experience for gift recipients.</div> <p> </p>Dado que ambas secciones usan las mismas clases, agregué data-more-link-id="1" y data-more-content-id="1" a cada sección para apuntar a una sección específica. El código jQuery que escribí está debajo, que está mal en alguna parte. ¿Podría por favor ayudarme a arreglarlo?
$('.more-link-pwp').click(function() { // get data-more-link-id var dataMorelinkid = $(this).attr("data-more-link-id"); // get data-more-content-id var dataMorecontentid = = $(.more-content-pwp).attr("data-more-content-id"); // Iterate through dataMorecontentid. for (let i = 0; i < dataMorecontentid.length; i++) { if (dataMorecontentid[i] == dataMorelinkid) { // Change CSS for the classes whose data-more-content-id matches data-more-link-id. $('.more-content-pwp').css('display', 'block'); $(this).css('display', 'none'); return false; } }); CSS: .more-content-pwp {display: none;}
Lo que estoy tratando de lograr es cada vez que se hace clic en un enlace de leer más, solo se debe mostrar el contenido oculto específico de ese enlace, no el contenido de otras secciones que usan la misma clase.
$('.more-link-pwp').click(function() { // get data-more-link-id var dataMorelinkid = $(this).attr("data-more-link-id"); $(this).hide(); // update 1 $(".more-content-pwp").each(function(){ // $(this).hide(); // update 2 const id = $(this).attr('data-more-content-id'); if(id == dataMorelinkid){ $(this).show(); } }); }); .more-content-pwp{ display:none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>What kinds of gifts should you give employees? <a class="more-link-pwp" href="#" data-more-link-id="1">Read More.</a></p> <div class="more-content-pwp" data-more-content-id="1">How much should you spend? Should corporate gifts for employees be company-branded? Our expert team will help you choose memorable, unique gifts for your employees and office staff.</div> <p> Deepen employee engagement and impress new hires while giving employee gifts that are meaningful and memorable. <a class="more-link-pwp" href="#" data-more-link-id="2">Read More.</a></p> <div class="more-content-pwp" data-more-content-id="2">From empowering underserved women with job skills to supporting sustainability efforts every gift creates an impact. Our Impact Booklet showcases these inspiring stories, providing a unique experience for gift recipients.</div> <p> </p>La siguiente línea generará una cadena, no una matriz.
var dataMorecontentid = = $(.more-content-pwp).attr("data-more-content-id");El siguiente código funciona.