Question

您好我是javascript的新手，我在一个有不同电话的网站上制作了很多按钮。它们都是相同的减去结果，几乎像hide.1和show.2等。它相当大但必须有一种方法使它变小？它没有什么大不了的编码，我不想进入做的习惯。并且（a）在其中一些之后的唯一原因是呼叫不能工作两次，所以当我将它设置为全尺寸屏幕和移动屏幕时，它不能正常工作？感谢

代码是：

    $(document).ready(function() {
   $('#btn-continue').on('click', function() {
      $('#loginbox').hide(); 
      $('#1box').show();
   })
});

$(document).ready(function() {
   $('#btn-next1').on('click', function() {
      $('#1box').hide(); 
      $('#2box').show();
   })
});



$(document).ready(function() {
   $('#btn-next2').on('click', function() {
      $('#2box').hide(); 
      $('#3box').show();
   })
});

$(document).ready(function() {
   $('#btn-back2').on('click', function() {
      $('#2box').hide(); 
      $('#1box').show();
   })
});

$(document).ready(function() {
   $('#btn-next2a').on('click', function() {
      $('#2box').hide(); 
      $('#3box').show();
   })
});

$(document).ready(function() {
   $('#btn-back2a').on('click', function() {
      $('#2box').hide(); 
      $('#1box').show();
   })
});

$(document).ready(function() {
   $('#btn-next3').on('click', function() {
      $('#3box').hide(); 
      $('#4box').show();
   })
});

$(document).ready(function() {
   $('#btn-back3').on('click', function() {
      $('#3box').hide(); 
      $('#2box').show();
   })
});

$(document).ready(function() {
   $('#btn-next3a').on('click', function() {
      $('#3box').hide(); 
      $('#4box').show();
   })
});

$(document).ready(function() {
   $('#btn-back3a').on('click', function() {
      $('#3box').hide(); 
      $('#2box').show();
   })
});

$(document).ready(function() {
   $('#btn-next4').on('click', function() {
      $('#4box').hide(); 
      $('#5box').show();
   })
});

$(document).ready(function() {
   $('#btn-back4').on('click', function() {
      $('#4box').hide(); 
      $('#3box').show();
   })
});

$(document).ready(function() {
   $('#btn-next4a').on('click', function() {
      $('#4box').hide(); 
      $('#5box').show();
   })
});

$(document).ready(function() {
   $('#btn-back4a').on('click', function() {
      $('#4box').hide(); 
      $('#3box').show();
   })
});

$(document).ready(function() {
   $('#btn-back5').on('click', function() {
      $('#5box').hide(); 
      $('#4box').show();
   })
});

$(document).ready(function() {
   $('#btn-back5a').on('click', function() {
      $('#5box').hide(); 
      $('#4box').show();
   })
});

这些电话的工作原理如下：

<div class="col-sm-6 controls hidden-xs">
    <div><button id='btn-back2' name ='back2' type='button' class='btn btn-success'>Back</button></div></div><div class="hidden-xs"><button id='btn-next2' name ='next2' type='button' class='btn btn-primary'>Next</button></div>
    </div>
    
    <div class="col-xs-6 controls hidden-sm hidden-md hidden-lg">
    <div><button id='btn-back2a' name ='back2a' type='button' class='btn btn-success'>Back</button></div></div><div class="hidden-sm hidden-md hidden-lg"><button id='btn-next2a' name ='next2a' type='button' class='btn btn-primary'>Next</button></div

＆GT;

Answer 1

让它更通用。您可以使用类或数据属性。有很多不同的方法可以做到这一点。

jsfiddle - https://jsfiddle.net/vouvcedj/4/

仍然有很多可以完成的清理工作，但是你应该做的很清楚。

JS

$(function() {
    var handleFirstLast = function() {
        if ($('.shown').is('.section:first')) {
            $('#btn-back').hide();
        } else {
            $('#btn-back').show();
        }

        if ($('.shown').is('.section:last')) {
          $('#btn-forward').hide();
        } else {
            $('#btn-forward').show();
        }
    }

    handleFirstLast();
    $('#btn-back').on('click', function(e) {
        // find the currently shown section and get the previous
        // https://api.jquery.com/next/
        var $showing = $('.section.shown');
        $showing.prev().removeClass('hidden').addClass('shown');
        $showing.removeClass('shown').addClass('hidden');
        handleFirstLast();

    });
    $('#btn-forward').on('click', function(e) {
        var $showing = $('.section.shown');
        $showing.next().removeClass('hidden').addClass('shown');
        $showing.removeClass('shown').addClass('hidden');
        handleFirstLast();
    });

});

HTML

<div class="sections">
    <div class="section shown">
        section 1
    </div>
    <div class="section hidden">
        section 2
    </div>
    <div class="section hidden">
    </div>
 </div>
 <div class="actions">
     <button id="btn-back">Back</button>
     <button id="btn-forward">Forward</button>
 </div>

Answer 2

也许这样的事情会有意义：

$(document).ready(function() {
  const buttons = [
    ['btn-continue', 'loginbox', '1box'],
    ['btn-next1', '1box', '2box'],
    ['btn-next2', '2box', '3box'],
    ['btn-back2', '2box', '1box'],
    ['btn-next2a', '2box', '3box'],
    ['btn-back2a', '2box', '1box'],
    ['btn-next3', '3box', '4box'],
    ['btn-back3', '3box', '2box'],
    ['btn-next3a', '3box', '4box'],
    ['btn-back3a', '3box', '2box'],
    ['btn-next4', '4box', '5box'],
    ['btn-back4', '4box', '3box'],
    ['btn-next4a', '4box', '5box'],
    ['btn-back4a', '4box', '3box'],
    ['btn-back5', '5box', '4box'],
    ['btn-back5a', '5box', '4box']
  ]
  buttons.forEach(function(b) {
    $('#' + b[0]).on('click', function() {
      $('#' + b[1]).hide(); 
      $('#' + b[2]).show();
    });
  });
});

这会在单个结构中捕获重复数据，并用循环替换重复代码。

注意，这是完全未经测试的。

Answer 3

这是指DRY（不要重复自己）原则，它是编程的核心原则之一。如果你发现自己在代码中重复，意味着麻烦，如果你需要去每个地方并实施它，那么一个小小的改变对你来说可能是灾难性的。

使用DRY原则，您只需编写一次代码并通过多种技术重复使用它。更改只能应用于一个地方。

成功应用DRY原则后，修改任何系统的单个元素不需要在其他元素中进行更改逻辑上不相关的元素。另外，元素是逻辑上相关的所有变化都是可预测和均匀的，因而是保持同步。

您可以将代码更改为以下内容：

var myNs = myNs || {};
$(document).ready(function() {
  $(myNs.map).each(function(index, value) {
    $(value.clickedElement).on('click', clickHandler.bind(this, value));
  });

  function clickHandler(value) {
    $(value.hideElement).hide();
    $(value.showElement).show();
  }
});

myNs怎么样？这是一个配置对象，一个用于加载元素配置的命名空间。这可以是完全不同的JavaScript文件，当然在此特定脚本之前加载。

示例：

// This can be in a completely different file
var myNs = {
  map: [{
    clickedElement: '#btn-continue',
    hideElement: '#loginbox',
    showElement: '#1box'
  }, {
    clickedElement: '#btn-next1',
    hideElement: '#1box',
    showElement: '#2box'
  }, {
    clickedElement: '#btn-next2',
    hideElement: '#2box',
    showElement: '#3box'
  }, {
    clickedElement: '#btn-back2',
    hideElement: '#2box',
    showElement: '#1box'
  },
  ...
  ]
};

您可以向前迈出一步，使用新的ES6模块甚至AMD模块。当然，您需要一个模块加载器，如SystemJS，Webpack或RequireJS。

查看以下plunk以查看某些代码的最高点。

几个javascript调用合二为一

3 个答案: