超鸡

//list1
document.querySelector('#list1-s').addEventListener ('click', function () {
  document.querySelector('#list1').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#list1-h').addEventListener ('click', function () {
  document.querySelector('#list1').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

//list2
document.querySelector('#list2-s').addEventListener ('click', function () {
  document.querySelector('#list2').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#list2-h').addEventListener ('click', function () {
  document.querySelector('#list2').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

。。。
。。。
。。。
。。。
。。。
。。。

//list20
document.querySelector('#list20-s').addEventListener ('click', function () {
  document.querySelector('#list20').className = 'current';
  document.querySelector('[data-position="current"]').className = 'left';
});
document.querySelector('#list20-h').addEventListener ('click', function () {
  document.querySelector('#list20').className = 'right';
  document.querySelector('[data-position="current"]').className = 'current';
});

监听点击事件的，大约有二十个点击的地方需要监听，点击一是list1，点击二是list2。。。。。一直到list20。


比如：
第一段代码点击list1-s是显示list1，点击list1-h是隐藏list1，
第二段代码点击list2-s是显示list2，点击list2-h是隐藏list2，
。。。
。。。
。。。
。。。
。。。
。。。
第二十段代码点击list20-s是显示list20，点击list20-h是隐藏list20。


如果这二十个每个都写一遍，JS体积就大了，JS代码也是有些规律的，能不能把这二十个写到一段JS里边呢？

boyXP

用jquery，只需一行

超鸡

boyXP 发表于 2014-9-27 00:43
用jquery，只需一行

jquery体积更大了…………。

超鸡

顶            

wangeng01

代码很复杂，帮顶一下

bddyw

var c = document.querySelector('[data-position="current"]');
document.addEventListener('click', function(e){
        var targtId = e.target.getAttribute('id') || '';
        if(/^list(\d+)\-[s|h]$/.test(targtId)){
                var id = targtId.match(/^list(\d+)\-[s|h]$/)[1],
                        cls = targtId[targtId.length - 1] === 's' ? ['current', 'left'] : ['right', 'current'];
                document.querySelector('#list' + idx).className = cls[0];
                c.className = cls[1];
        }
});