erhöhen und verringern Brief

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

meine Absicht der Brief beginnt bei A und wenn Sie drücken und erhöhen Sie es auf B, C, D und so weiter. Wenn du min drückst, wird es kleiner, aber weil die Zahl bei 0 beginnt, habe ich ein Problem beim Plusen. Ich muss -1 benutzen, um es richtig zu machen, aber ich fühle, dass ich falsch liege.

ich mache ich den richtigen weg hier? Kannst du es weniger riskant machen? Ich fühle mich wie mein Code ist riskant

Demo here

Answer 1

Sie den Modulo verwenden können (ähnlich Rest) Operator, % und data-increment Attribute auf jeder Taste, um die Anzahl der Ereignis-Listener notwendig zu reduzieren und machen Sie Ihren Code besser lesbar :

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

Ihr Code ist fehlerfrei, aber er kann auf verschiedene Arten vereinfacht werden. Hier ist einer von ihnen:

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

Durch eine Funktion erstellen, die den gemeinsamen Teil Griffe zwischen den beiden Tasten ausführen, Sie reduziert die Codegröße.

Notiere die doppelte Verwendung von letterbox.length innerhalb der Modulo-Operation: es lässt Sie negativen Schritten verarbeiten (wenn man bedenkt, dass dieser Zuwachs -1 ist, oder zumindest größer als -letterbox.length)