Question

我正在构建项目网格，当您点击循环中的特定'project'时，div 'project_expanded'需要显示，同时隐藏所有其他'project_expanded' div。

我计划使用show / hide函数在jQuery中解决这个问题，但我不确定最好的方法是将其隐藏在其父级被点击的所有其他'project_expanded' div之外。

我相信循环中的每个项目可能都需要一个唯一的标识符，例如item1，item 2，item 3，但由于该列表可能永远存在，我不知道如何让Javascript识别所有这些。

非常感谢任何帮助！

    <?php while( have_rows('portfolio') ): the_row(); 

                // vars
                $name = get_sub_field('name');
                $date = get_sub_field('date');
                $kit = get_sub_field('kit_used');
                $description = get_sub_field('description');
                $link = get_sub_field('video_url');
                $image = get_sub_field('image');
                $thumb = $image['sizes'][ 'large' ];
                ?>

                <?php 

                if( !empty($name) ):
                ?>
                <div class="project" style="background-image:url('<?php echo $thumb ?>');">
                    <div class="project_overlay">
                        <p class="prj_title"><?php echo $name; ?></p>
                        <p><?php echo $date; ?></p>
                        <p><?php echo $kit; ?></p>
                    </div>
                </div>
                <div class="project_expanded">
                    <h1><?php echo $name; ?> | <?php echo $date; ?></h1>
                    <p class="red_text"><?php echo $kit; ?></p>
                    <div data-type="youtube" data-video-id="<?php echo $link; ?>"></div>
                </div>
                <?php endif; ?>

            <?php endwhile; ?>

Answer 1

'hiding all except one' - 问题可以通过隐藏所有问题来解决，然后显示一个问题要找出应该显示哪一个，可以通过将this（被点击的元素）作为onclick方法的参数传递来完成。

<div class="project" onclick="showProjectExpanded(this)">...</div>

在js函数中，您可以搜索要隐藏的元素（在您的情况下，它是一个类project_expanded的兄弟），隐藏所有.project_expanded div并显示所选的div。

function showProjectExpanded(project){
    var projectDiv = $.(project);  // not sure here, havent used jQuery for a long time ;)
    var divToShow = projectDiv.next();

    // hide all project_expanded divs
    $.('.project_expanded').hide();

    // show single project_expanded div
    divToShow.show();
}

Javascript在循环中显示/隐藏特定子项，具体取决于单击其父项

1 个答案: