需要帮助简化jQuery代码
需要帮助简化jQuery代码
提问于 2014-04-03 04:14:32
这是我的HTML代码，active类显示单击的内容：
<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 & 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代码，只用于推-1和拉-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得到的活动类。有人能告诉我，或指出正确的方向，如何简化这一点？对我来说，这似乎是多余的，但我还不够好。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-04-03 04:16:15
试一试
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');
})
})演示：小提琴
Stack Overflow用户
发布于 2014-04-03 04:17:53
只需像这样使用
$("[id^=push],[id^=pull]").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
});这将将单击事件绑定到以id push和pull开头的所有元素。可以使用单行$(".active").removeClass("active");从所有元素中删除活动类。
Stack Overflow用户
发布于 2014-04-03 04:18:04
您可以向它们添加一个类，然后调用类而不是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");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22827722
复制相关文章
相似问题
腾讯云开发者
