使用javascript中的类选择悬停时的当前div元素

时间:2015-06-17 06:13:57

标签: javascript jquery css wordpress javascript-events

我正在制作一个wordpress博客&编辑插件php文件。该插件使用 while 循环显示所有帖子。悬停原始当前div =" myClass2" &安培; ID =" DIV2"应该替换为class =" myClass1"的相应div。 &安培; ID =" DIV1"使用javascript函数,但我只悬停在第一个帖子上的任何帖子被替换为我的相应div,如果使用id并且ClassName不起作用。

    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>

1 个答案:

答案 0 :(得分:0)

函数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]); } } 返回一个元素数组。因此,您必须遍历每个项目并单独应用样式。

PhoneCallTask phoneCallTask = new PhoneCallTask();
phoneCallTask.PhoneNumber = "8920383839";
phoneCallTask.DisplayName = "Gage";
phoneCallTask.Show();