Question

您好我想让我的jquery选择器更有效率。有人可以帮帮我吗？我认为我可以某种方式只针对父母/孩子。

我还想在wordpress php代码中改进我的查询。

任何提示都将不胜感激。

PHP：

<figure class="about-us">
    <div class="overlay">
        <h1><?php echo get_the_title(13); ?></h1>
        <h2><?php global $wp_query; $postid = 13; 
            echo get_post_meta($postid, 'Subheading', true); ?></h2>
    </div>
    <img src="<?php bloginfo('template_url'); ?>/img/Prelude-To-A-Number-Rehearsal-190114.jpg" alt="Prelude To A Number rehearsals">
    <figcaption><p><?php global $wp_query; $postid = 13; 
            echo get_post_meta($postid, 'Description', true); ?></p>    </figcaption>
</figure>

jquery的：

$(document).ready(function() { 
    if ($(".nav ul").css("text-align") == "center" ){
        $(".overlay h1").hide();
        $(".overlay h2").hide();
        $("figcaption").hide(); 
        $(".current-projects" ).hover(function(){
            $('.current-projects .overlay h1').fadeToggle();
            $('.current-projects .overlay h2').fadeToggle();
            $('.current-projects figcaption').slideToggle();
        })
        $(".past-projects" ).hover(function(){
            $('.past-projects .overlay h1').fadeToggle();
            $('.past-projects .overlay h2').fadeToggle();
            $('.past-projects figcaption').slideToggle();
        })
        $(".about-us" ).hover(function(){
            $('.about-us .overlay h1').fadeToggle();
            $('.about-us .overlay h2').fadeToggle();
            $('.about-us figcaption').slideToggle();
        })
        $(".pen-chant" ).hover(function(){
            $('.pen-chant .overlay h1').fadeToggle();
            $('.pen-chant .overlay h2').fadeToggle();
            $('.pen-chant figcaption').slideToggle();
        })
        $(".media" ).hover(function(){
            $('.media .overlay h1').fadeToggle();
            $('.media .overlay h2').fadeToggle();
            $('.media figcaption').slideToggle();
        })
        $(".gigs" ).hover(function(){
            $('.gigs .overlay h1').fadeToggle();
            $('.gigs .overlay h2').fadeToggle();
            $('.gigs figcaption').slideToggle();
        })
    }
});

Answer 1

使用selector1,selector2（逗号分隔）来处理事件＆amp;下面是处理2个类的示例。只需为您的案例添加更多逗号。

$(".current-projects, .past-projects" ).hover(function(){
    $(this).find('.overlay').find('h1').fadeToggle();
    $(this).find('.overlay').find('h2').fadeToggle();
    $(this).find('figcaption').slideToggle();
})

您还可以通过为每个div添加一个公共类来简化它。避免逗号分离。例如，假设该类为commonClass

$(".commonClass" ).hover(function(){
    $(this).find('.overlay').find('h1').fadeToggle();
    $(this).find('.overlay').find('h2').fadeToggle();
    $(this).find('figcaption').slideToggle();
})

改进我的jquery选择器/ wordpress php查询

1 个答案: