javascript - JQUERY 1.7.1 toggle li id 不工作

Question

我使用此处提供的代码:http://trevordavis.net/blog/simple-jquery-text-resizer以便我的访问者可以调整页面文本的大小。我喜欢这种方法，除了它使用 3 个按钮来更改文本大小这一事实。我有重新调整大小的按钮工作，但我现在想要完成的是让它循环我的按钮(显示: block - 显示:无)。 ei:如果文本大小小，则显示中等按钮，如果文本大小中等，则显示大按钮，如果文本大，则显示小按钮，而不是一直显示 3 个按钮。

我正在使用 jquery-1.7.1.min.js(切换尚未停用)。

我的文本调整部分代码有效，但切换按钮无效。可能有希望在 ID 而不是类上进行切换，但是，由于 js 不流利，我还没有弄清楚如何针对 id 而不是类，而且我不知道那是什么错误首先是代码。

这是我的代码:

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<script type="text/javascript">
/*set resizer cookie*/
$(document).ready(function() {
    if($.cookie('TEXT_SIZE')) {
        $('body').addClass($.cookie('TEXT_SIZE'));  
    } else {
        $('body').addClass("small");    
    }
    /*set resizer class to body*/
    $('.resizer a').click(function() {
        var textSize = $(this).parent().attr('class');
        $('body').removeClass('small medium large').addClass(textSize);
        $.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
        return false;
        /*show the proper button (for looping sizes, from small to large, back to small ---NOT WORKING*/
         $('.toggle').hide();

        if (textSize = 'small') {elem = "medium" };
        if (textSize = 'medium') {elem = "large" } ;
        if (textSize = 'large') {elem = "small" };
    $('.toggle').not(elem).hide();
    elem.toggle();          
    });
});
</script>

<ul class="resizer" id="link">
<li class="small" id="small" style="display: block;"><a href="#" class="togglelink">  <img alt="larger" width="22" height="16" src="../Images/BaseFiles/glyphicons_115_text_smaller.png"/></a></li>
<li class="medium"  id="medium"  style="display: none;"><a href="#" class="togglelink"><img alt="larger" width="22" height="16" src="../Images/BaseFiles/glyphicons_116_text_bigger.png"/></a></li>
<li class="large"  id="large" style="display: none;"><a href="#" class="togglelink">  <img alt="smaller" width="22" height="16" src="../Images/BaseFiles/glyphicons_116_text_bigger.png"/></a></li>
</ul>

感谢您的帮助!

Answer 1

working example

在您的代码中，循环 sizes block 位于“return false”表达式之后，它结束了“click”函数中脚本的任何进一步执行。

在jquery中操作类也有一些错误像这样:

if (textSize == 'small') {elem = ".medium" };