点击某一事件让其改变 style,但让其他区域恢复原本 style,求思路

2015-09-26 14:05:09 +08:00
 cc7756789
<div class="exp-about exp-left-block">
     <p class="exp-left-pagh">声明与条款</p>
    <div class="exp-over-upright"></div>
</div>

<div class="exp-change-log exp-left-block">
     <p class="exp-left-pagh">更改日志</p>
     <div class="exp-over-upright"></div>
</div>

<div class="exp-other exp-left-block">
     <p class="exp-left-pagh">赞助商</p>
     <div class="exp-over-upright"></div>
</div>

JS 和 HTML 无关

function add3Events(){
  for (var i=0; i < bar_list.length; i++) {
    bar_list[i].onclick = function(num) {

        return function() {
         // 点击改变 css
          this.getElementsByTagName('div')[0].style.display = 'block';
          this.style.backgroundColor = '#00A2CA';
          this.style.color = '#ffffff';

         // 其他 div 恢复默认 css
          [].forEach.call(bar_list, function(ele, index, arr) {
            if (index == num) return;
            ele.getElementsByTagName('div')[0].style.display = 'none';
            ele.style.backgroundColor = '#F4F4F4';
            ele.style.color = '#333333';
          });
        };

     }(i);

  }
}

像这样的选中某个 div ,此 div 的样式改变。但是其他区域只有用循环这种死方法,然后判断不是当前 div 的其他 div 的样式恢复正常。这样感觉太烦了,有没有好一点的方法呢,求思路。

3362 次点击
所在节点    JavaScript
12 条回复
jugelizi
2015-09-26 14:15:27 +08:00
addclass removeclass
viko16
2015-09-26 14:24:13 +08:00
为什么不能反过来呢,先全部都恢复,再对那只特殊的进行处理
Septembers
2015-09-26 14:28:40 +08:00
likai
2015-09-26 14:31:23 +08:00
将 style 写成 class.然后参考 @jugelizi @viko16
learnshare
2015-09-26 14:58:03 +08:00
参考 #2 ,先抹平,然后再处理特定项
breeswish
2015-09-26 15:10:08 +08:00
先用 jQuery 的批量处理特性
再用 #2 说的先全部取消再特殊处理

只需 2 行:
$(.....).removeClass('....');
$(this).addClass('....');
breeswish
2015-09-26 15:13:00 +08:00
或者,对于一定只有一个处于激活状态的,也可以用 lastXXX

比如

var lastActivatedTab = null;
....
....
tab.onclick = function () {

if (lastActivatedTab !== null) {
// do somthing to `lastActivatedTab`
}

// do something to `this`
lastActivatedTab = this;

}
jiongxiaobu
2015-09-26 15:36:31 +08:00
GeekTest
2015-09-26 19:06:19 +08:00
头像好评
alexsunxl
2015-09-26 19:43:10 +08:00
alexsunxl
2015-09-26 19:44:49 +08:00
@breeswish 我能用一行 $(this).addClass(cls).siblings().removeClass(cls);
如果需要返回$(this),就这样 $(this).addClass(cls).siblings().removeClass(cls).end()
vitovan
2015-09-27 08:40:34 +08:00
Not 选择器。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/223845

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX