js全局变量

我下面的bStop我想改成私有的，共用一个会有问题，三组div自己用自己的开关，要怎么改？



<div>
    <span>中国</span>
    <div>中国是一个伟大的国度</div>
</div>




<div>
    <span>日本</span>
    <div>日本是一个男人幸福的国度</div>
</div>




<div>
    <span>法国</span>
    <div>法国是一个浪漫的国度</div>
</div>



 var bStop = true;
 $("span").bind("click", function() {
        if (bStop) {
          $(this).parents("div").find("div").animate({height : "100px";}, 1000);
        } else {
          $(this).parents("div").find("div").animate({height : "0";}, 1000);
          bStop = false;
        }
        bStop = !bStop;
 });

---

直接把值存到对应的元素上吧，可以用jquery的data方法

---

个人建议用class来控制。动画css3足够用了（低版本浏览器.....忽略他们）。

那js代码就只有：

$(document).on('click', 'span', function (){
    $(this).toggleClass('active'); //active为开关类
})

css代码：

...

js代码量少了， 也没有全局变量了

---

修改：

如果非用全局，我会这么做(楼上的回答其实也没全局，和class方法类似)：

var showIndex = 0; //当前显示元素的索引值

$(document).on('click', 'span', function () { 
    showIndex  = $('span').index($(this));
    $('span').hide();
    $('span').eq(showIndex).show();  
})

即点击售后获取到当前div的索引值，隐藏当前，然后显示其他。so, 为什么不考虑，siblings 呢（因为又没有全局变量了....）