Question

我有一种感觉，我的代码可以简化为一个函数，它接受发送给它的参数并以相同的方式完成工作，而不是硬编码一堆相同的滑块，但我不知道如何做到这一点。

这是我的代码：

$(function() {
    var $target1 = $('.target1');
    var $target2 = $('.target2');
    var $target3 = $('.target3');

    $target1.toggleClass('hidden1', sessionStorage.getItem('form_visible1') != 'true');
        $target2.toggleClass('hidden2', sessionStorage.getItem('form_visible2') != 'true');
        $target3.toggleClass('hidden3', sessionStorage.getItem('form_visible3') != 'true');

    $('.slide1').click(function() {
            $target1.slideToggle('slow', function() {
                $(this).toggleClass('hidden1');
            });

            sessionStorage.setItem('form_visible1', $target1.hasClass('hidden1'));
        });                             

        $('.slide2').click(function() {
            $target2.slideToggle('slow', function() {
                $(this).toggleClass('hidden2');
            });
            sessionStorage.setItem('form_visible2', $target2.hasClass('hidden2'));
        });                             

        $('.slide3').click(function() {
            $target3.slideToggle('slow', function() {
                $(this).toggleClass('hidden3');
            });
            sessionStorage.setItem('form_visible3', $target3.hasClass('hidden3'));
        });     
   });

HTML：

<div class="slide1">slider1</div> <div class="target1">test</div>

<div class="slide2">slider2</div> <div class="target2">test</div>

<div class="slide3">slider3</div> <div class="target3">test</div>

DEMO LINK

Answer 1

这只是优化的一个想法，你可以看看，我改变了html标记，css，并尽量不要改变sessionstorage

检查这个小提琴

http://jsfiddle.net/2ADsL/2/

它足够优化？分享想法

$(function() {

    $('.target').each(function(i, v){
        var $i = i + 1;
        $(v).toggleClass('hidden',
         sessionStorage.getItem('form_visible' + $i) != 'true');
    });

    $('.slide').click(function(ev){
        var $ev = $(ev.currentTarget);
        var $next = $ev.next();

         $next.slideToggle('slow', function() {
              $(this).toggleClass('hidden');
         });
         sessionStorage.setItem('form_visible' + $ev.attr("id"), $next.hasClass('hidden'));
    });
});

优化jquery滑块代码以提高效率

1 个答案: