javascript - js全局变量

Question

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



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




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




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



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

Answer 1

个人建议用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();  
})

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

Answer 2

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