Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/69.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
优化jquery滑块代码以提高效率_Jquery_Html - Fatal编程技术网

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

优化jquery滑块代码以提高效率,jquery,html,Jquery,Html,我有一种感觉,我的代码可以简化为一个函数,它接受发送给它的参数,并以相同的方式完成工作,而不是硬编码一堆相同的滑块,但我不知道如何做 这是我的密码: $(function() { var $target1 = $('.target1'); var $target2 = $('.target2'); var $target3 = $('.target3'); $target1.toggleClass('hidden1', sessionStorage.getIte

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

这是我的密码:

$(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:

slider1测试
滑块2试验
滑块3试验

这只是优化的想法之一,你可以看看,我更改了html标记、css,并尽量不更改会话存储

检查这把小提琴

它是否足够优化?分享想法

$(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'));
    });
});
$(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'));
    });
});