如何显示与点击的链接相关的特定内容答案

【问题标题】：How to show specific content relating to link clicked on如何显示与点击的链接相关的特定内容
【发布时间】：2022-01-04 12:40:11
【问题描述】：

我目前在一个网站上工作，我的客户需要一个图标列表，当您单击一个图标时，一个面板会滑入，其中包含与该图标相关的信息。这是该部分的链接 - https://vibrantpropertyservices-u8uj.temp-dns.com/wp/services/#services。

我有滑动面板，但我似乎无法显示相关内容，它只显示第一个图标的信息。这是我的代码：

    <?php
        $services_query = new WP_Query( array(
            'post_type' => 'servicespage',
            'posts_per_page' => -1,
            'order'   => 'ASC',
            'orderby' => 'menu_order'
            )
        );
    ?>
    
    
    <?php if ( $services_query->have_posts() ) : ?>
        <?php while ( $services_query->have_posts() ) : $services_query->the_post(); ?> 
            <?php $current_id = get_the_ID(); ?>
    
            <div class="icon" onclick="openNav()" data-src="content-<?php echo $current_id ?>">             
                
                <?php if (has_post_thumbnail( $post->ID ) ): ?>
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                    <img src="<?php echo $image[0]; ?>">     
                <?php endif; ?>
                
                <h3><?php the_title(); ?></h3>  
                
            </div>
    
            <div id="slide" class="overlay">    
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            
                <div id="content-<?php echo $current_id ?>">    
                    <div class="test">
                    
                        <h3><?php the_title(); ?></h3>      
                        <?php the_content(); ?>     
                    
                    </div>
                </div>
                
            </div>
    
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
    <?php endif; ?>             
</div>

/* Open when someone clicks on the span element */
            function openNav() {
              document.getElementById("slide").style.width = "100%";
            }

            /* Close when someone clicks on the "x" symbol inside the overlay */
            function closeNav() {
              document.getElementById("slide").style.width = "0%";
            }

我知道我正在调用“幻灯片”的 ID，但我不知道如何为每个单独的链接定位 <div id="content-<?php echo $current_id ?>">？

非常感谢

【问题讨论】：

只需将ID作为参数传递给openNav()和closeNav() ...?
我试过了，但我可能做错了，你能告诉我怎么做吗？
请展示您的尝试。
function openNav() { document.getElementById("content-<?php echo $current_id ?>").style.width = "100%"; }
不，不在那里，这没有任何意义。将 ID 作为参数传递，当您调用那些函数时，<div class="icon" onclick="openNav('my-own-id-here')" 然后在 getElementById 调用中使用传递的参数。

标签： javascript php wordpress

【解决方案1】：

删除两个打开的 onclick 功能

<div class="icon" data-src="content-<?php echo $current_id ?>">

也关闭

        <a href="javascript:void(0)" class="closebtn">&times;</a>

在 Jquery 下面添加而不是函数

jQuery(document).on("click",".services-wrap .icon",function(){
        jQuery(this).closest('div.overlay').css('width:100%');
    });
    
    jQuery(document).on("click",".overlay .closebtn",function(){
        jQuery(this).closest('div.overlay').css('width:0%');
    });

【讨论】：