増減文字

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などに増加し続けます。あなたが分を押すと、それは減少しますが、数字が0から始まるので、私はそれを正しくするために-1を使用しなければならないプラスにいくつかの問題がありますが、私は間違っていると感じています。

ここで正しい方法をしていますか？あなたはそれをより低い危険にすることができますか？私は私のコードのように感じるが危険である

Demo here

Answer 1

あなたが必要なイベントリスナーの数を削減し、コードを読みやすくするために、 %、（残りの部分と同様）演算子を法と各ボタンの 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 2

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

Answer 3

コードにエラーはありませんが、複数の方法で簡略化することができます。

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) }); 

2つのボタン間で実行する共通部分を処理する関数を作成すると、コードサイズが大幅に縮小されます。

注剰余演算の内部letterbox.lengthの二重使用：それはあなたが（この増分は-1、または-letterbox.lengthよりも少なくとも大きいことを考慮して）負の増分を処理することができます