Question

这是我的HTML代码，活动类显示点击的内容：

<div class="care_planning_lft">
    <ul>
        <li><a id="push-1" class="active">Care Planning</a></li>
        <li><a id="push-2">Care Teams</a></li>
        <li><a id="push-3">Care Coordination</a></li>
        <li><a id="push-4" class="padd">Secure, electronic<br>patient messaging</a></li>
        <li><a id="push-5" class="padd">Patient health<br>data &amp; reports</a></li>
        <li><a id="push-6">Patient Health alerts</a></li> 
        <li class="last"><a id="push-7" class="padd">EHR system<br>integration</a></li>
    </ul>
</div>
<div id="pull-1" class="care_planning_rht active">
    <?php
        $page_id = 1161; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-2">
    <?php
        $page_id = 1162; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-3">
    <?php
        $page_id = 1163; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-4">
    <?php
        $page_id = 1164; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-5">
    <?php
        $page_id = 1165; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-6">
    <?php
        $page_id = 1166; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-7">
    <?php
        $page_id = 1167; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>

这是我的jQuery代码，仅适用于push-1和pull-1：

$(document).ready(function(){
    $("#push-1").click(function () {
        $("#push-1").addClass("active");
        $("#pull-1").addClass("active");
        $("#push-2").removeClass("active");
        $("#pull-2").removeClass("active");
        $("#push-3").removeClass("active");
        $("#pull-3").removeClass("active");
        $("#push-4").removeClass("active");
        $("#pull-4").removeClass("active");
        $("#push-5").removeClass("active");
        $("#pull-5").removeClass("active");
        $("#push-6").removeClass("active");
        $("#pull-6").removeClass("active");
        $("#push-7").removeClass("active");
        $("#pull-7").removeClass("active");
    });
});

现在，我已经为1-7重复了jQuery，只是更改了哪些ID获得了活动类。有人可以告诉我，或指出我正确的方向，如何简化这个？这对我来说似乎很多余，但我还不够好。

Answer 1

尝试

jQuery(function ($) {
    var $els = $('.care_planning_rht');
    var $as = $('.care_planning_lft a').click(function () {
        $(this).addClass('active');
        $as.not(this).removeClass('active');

        var target = '#pull-' + this.id.match(/\d+$/)[0];
        $els.not(target).removeClass('active');
        $(target).addClass('active');
    })
})

演示：Fiddle

Answer 2

只需像这样使用

$("[id^=push],[id^=pull]").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

这会将点击事件绑定到以id push和pull开头的所有元素。您可以使用单行$(".active").removeClass("active");

从所有元素中删除活动类

Answer 3

您可以使用toggleClass ¹。：

e.g：

HTML：

<ul>
    <li><a id="push-1" class="active toggle">Care Planning</a></li>
    <li><a id="push-2" class="toggle">Care Teams</a></li>
    <li><a id="push-3" class="toggle">Care Coordination</a></li>
    <li><a id="push-4" class="toggle padd">Secure, electronic<br>patient messaging</a></li>
    <li><a id="push-5" class="toggle padd">Patient health<br>data &amp; reports</a></li>
    <li><a id="push-6">Patient Health alerts</a></li> 
    <li class="last"><a id="push-7" class="padd">EHR system<br>integration</a></li>
</ul>

<div id="pull-1" class="care_planning_rht toggle active">
...
</div>
...

的javascript：

$('a.toggle').click(function() {
    $('.toggle').toggleClass('active');
});

^{¹假设所有元素都有一个共同的选择器 - 在我的例子中我使用了一个类，但你可以使用更高级的选择器，因为其他一些人建议删除必须在HTML中添加另一个类。}

Answer 4

你可以为它们添加一个类并调用类而不是id，或者你可以这样做：

$("#push-2,#pull-2,#push-3,#pull-3,#push-4,#pull-4,#push-5,#pull-5,#push-6,#pull-6,#push-7,#pull-7").removeClass("active");

需要帮助简化jQuery代码

4 个答案: