Question

var letterbox = ["A", "B", "C", "D", "E", "F", "G", "H", "I",];

var counter = 0;

  $(".plusbtn").click(function(){

    if(counter >= letterbox.length - 1){
        counter = -1;
    }

    counter++;

    $(".ux--wrapper").empty();
    $(".ux--wrapper").append("<p>"+letterbox[counter]+"</p>");
  });

  $(".minbtn").click(function(){
      if(counter <= 0){
        counter = letterbox.length;
        }

    counter--;
    $(".ux--wrapper").empty();
    $(".ux--wrapper").append("<p>"+letterbox[counter]+"</p>");
  });

我的意图是这封信从A开始，当你按下加号时，它会继续增加到B，c，D等等。当你按min时它会减少，但由于数字从0开始，所以我在加号时有一些问题我必须使用-1来使它正确，但我觉得我做错了。

我在这里做正确的方法吗？你能让它风险更低吗？我觉得我的代码有风险

Demo here

Answer 1

您的代码没有错误，但可以通过多种方式简化。这是其中之一：

var letterbox = ["A", "B", "C", "D", "E", "F", "G", "H", "I",];

var counter = 0;

function update_counter(inc)
{
    counter = (counter + inc + letterbox.length) % letterbox.length;
    $(".ux--wrapper").empty().append("<p>"+letterbox[counter]+"</p>");
}

$(".plusbtn").click(function() { update_counter(1) });
$(".minbtn").click(function() { update_counter(-1) });

通过创建一个处理两个按钮之间执行的公共部分的函数，可以大大减少代码大小。

注意在模运算中双重使用letterbox.length：它允许你处理负增量（考虑到这个增量是-1，或者至少大于-letterbox.length）

Answer 2

您可以在每个按钮上使用模数（类似于余数）运算符，%和data-increment属性来减少必要的事件侦听器数量并使代码更具可读性：

var letters = 'ABCDEFGHI'.split('')
var counter = 0

var output = $('.ux--wrapper p')[0]

$('.plusbtn, .minbtn').click(function() {

  counter += +$(this).data('increment')

  if (counter < 0) counter += letters.length
  else counter %= letters.length

  output.textContent = letters[counter]
})

.minbtn,
.plusbtn {
  float: left;
  cursor: pointer;
}

.ux--wrapper {
  width: 100px;
  height: 50px;
  background-color: #000;
  color: #fff;
  text-align: center;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="minbtn" data-increment="-1">-</button>
<div class="ux--wrapper">
  <p>A</p>
</div>
<button class="plusbtn" data-increment="+1">+</button>

Answer 3

var letterbox = ["A", "B", "C", "D", "E", "F", "G", "H", "I",];

var counter = 0;

$(".plusbtn").click(function(){
    if(counter < letterbox.length){
        counter++;
    } else {
        counter = 0;
    }
    displayCounter();
});

function displayCounter() {
    $(".ux--wrapper").empty();
    $(".ux--wrapper").append("<p>"+letterbox[counter]+"</p>");
});

$(".minbtn").click(function(){
    if(counter > 0){
        counter--;
    } else {
        counter = letterbox.length;
    }
    displayCounter();
});

增加和减少信

3 个答案: