javascript - 在 Javascript 中使用类在悬停时选择当前 div 元素

Question

我正在制作一个 Wordpress 博客并编辑一个插件的 PHP 文件。该插件使用 while 循环显示所有帖子。将鼠标悬停在 class="myClass2 的当前 div 上“& id="div2" 应使用 Javascript 函数替换为 class="myClass1" & id="div1" 的相应 div，但如果使用 id 并且 ClassName 不起作用，无论我将鼠标悬停在第一篇文章上的哪个帖子都将替换我相应的 div .

    while ( $the_query->have_posts() ) { 
                            $the_query->the_post(); ?>
                            <article class="post type-post format-standard">                            
                                
                                <div  style="display:none;width:270px;height:370px;background-color:red" class="myClass1" onmouseout="myfunction2()" id="div1">
                                    <?php the_excerpt(); ?>
                                </div>                                  
                                
                                <div class="myClass2" id= "div2" onmouseover="myfunction1()">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                                                                        <img width="60" height="60" class="attachment-popular-post-featured-image wp-post-image" src="<?php echo $no_preview_img; ?>" />
                                        <?php } else {
                                            $check_size = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'popular-post-featured-image' );
                                            
                                        } ?>
                                    </a>
                                    
                                    
                                    <div id="mydiv3" >  <?php the_excerpt(); ?></div>
                                </div><!-- .entry-content -->
                            </article><!-- .post -->  


<script>
function myFunction1(){
document.getElementsByClassName("myClass1").style.display="block";
document.getElementsByClassName("myClass2").style.display="none";
}

function myFunction2(){
document.getElementsByClassName("myClass1").style.display="none";
document.getElementsByClassName("myClass2").style.display="block";
}
</script>

Answer 1

getElementsByClassName() 函数返回一个元素数组。因此，您必须遍历每个元素并单独应用样式。

function hide (element) {
    element.style.display="none";
}
function show (element) {
    element.style.display="block";
}

function myFunction1(){
    var array1 = document.getElementsByClassName("myClass1");
    var array2 = document.getElementsByClassName("myClass2");

    for (var i=0; i < array1.length; i++) { 
        show(array1[i]);
    }
    for (var i=0; i < array2.length; i++) { 
        hide(array2[i]);
    }
}