値が5のときに2番目の要素の大文字小文字が実行されない

Question

クリック数に応じて、個々のフィールド値を特定の値にアニメーション化するスクリプトを作成しました。スクリプトは正常に動作し、問題は1つしか表示されません。最初のフィールドがMAX（ケース5）のときは、プラスをクリックしても次のフィールドで何も起こりません。

なぜスクリプトが間違っているのかわかりません。手伝ってくれますか？

click = 0; 
 
\t 
 
$(".max").on("click", function() { 
 
\t \t 
 
\t elem = $(this).prev(); 
 
\t \t 
 
\t switch(click) { 
 
\t \t case 0: 
 
\t \t elem.animateNumber({number: 25000}); 
 
\t \t break; 
 
\t \t case 1: 
 
\t \t elem.animateNumber({number: 50000}); 
 
\t \t break; 
 
\t \t case 2: 
 
\t \t elem.animateNumber({number: 75000}); 
 
\t \t break; 
 
\t \t case 3: 
 
\t \t elem.animateNumber({number: 100000}); 
 
\t \t break; 
 
\t \t case 4: 
 
\t \t elem.animateNumber({number: 500000}); 
 
\t \t break; 
 
\t \t case 5: 
 
\t \t elem.text("MAX"); 
 
\t \t break; 
 
\t } 
 

 
\t click++; 
 
\t \t 
 
}); 
 
\t 
 
$(".min").on("click", function() { 
 
\t 
 
\t elem = $(this).next(); 
 
\t \t 
 
\t switch(click) { 
 
\t case 0: 
 
\t elem.text("MIN"); 
 
\t break; 
 
\t case 1: 
 
\t elem.animateNumber({number: 10000}); 
 
\t break; 
 
\t case 2: 
 
\t elem.animateNumber({number: 25000}); 
 
\t break; 
 
\t case 3: 
 
\t elem.animateNumber({number: 50000}); 
 
\t break; 
 
\t case 4: 
 
\t elem.animateNumber({number: 75000}); 
 
\t break; 
 
\t case 5: 
 
\t elem.animateNumber({number: 100000}); 
 
\t break; 
 
\t } 
 

 
\t click--; 
 
\t \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script> 
 
<section class="gen-box-field"> 
 
    <button type="button" class="min">-</button> 
 
    <div id="param1">10000</div> 
 
    <button type="button" class="max">+</button> 
 
</section> 
 
<section class="gen-box-field"> 
 
    <button type="button" class="min">-</button> 
 
    <div id="param2">10000</div> 
 
    <button type="button" class="max">+</button> 
 
</section>

Answer 1

だから私は、クリックと呼ばれる配列を作成し、その後、私は私がしたい値を配列内の位置として.genボックスフィールドコンテナのインデックスを使用していました。私はそれがすべて意味をなさないように十分なコメントをしようとしましたが、これが混乱しているかどうか尋ねることは自由です。

私が行ったもう1つの変更は、コールバックを最小と最大ボタンのイベントハンドラの両方でハードコードするのではなく、両方ともコールバックに使用する単一の関数を作成したことです。どちらの場合も機能はまったく同じですが、唯一の違いは増分または減分です。これにより、コーディング時間が節約され、デバッグする必要がある場合は、単一の場所でのみデバッグできます。

運が良かった！ +をクリックし、理由について、あなたの質問に答えるために

// as I've got multiple gen-box-field, I need an array for 
 
// to store the click values. Or, as another poster mentioned, 
 
// I could also store the data-click attribute directly on the 
 
// param field, for example. 
 
var click = [-1, -1]; 
 

 
// As both .max and .min do the exact same thing, we can really 
 
// use the same callback function for both. 
 
function handleClick(event) { 
 

 
    // for my own convenience, I create a reference to the clicked 
 
    // button. 
 
    var clickedEl = $(this); 
 
    // This tells me which of the gen-box-field containers holds the 
 
    // button that was clicked. I'll use that to index the click 
 
    // array. we use index('.gen-box-field") as we don't want ALL 
 
    // sibling nodes of the .gen-box-field, simply that collection. 
 
    var which = clickedEl.parents(".gen-box-field").index(".gen-box-field"); 
 
    // reference to the element we'll be animating. 
 
    var elem = clickedEl.parents(".gen-box-field").find(".param"); 
 

 
    // The math to count clicks should happen BEFORE the animation. 
 
    // Otherwise, clicking the + and then the - results in weird 
 
    // behaviors. Using the class of the clicked el, we can see 
 
    // if it is the + or the - that has been clicked, and do math! 
 
    if (clickedEl.hasClass("max") && click[which] < 5) { 
 
    // It was the plus button. Increment! 
 
    click[which]++; 
 
    } else if (clickedEl.hasClass("min") && click[which] >= 0) { 
 
    // It was the minus button. down, down to goblin town... 
 
    click[which]-- 
 
    } 
 

 
    // And having incremented or decremented, do the animation. 
 
    switch (click[which]) { 
 
    case -1: 
 
     elem.text("MIN"); 
 
     break; 
 
    case 0: 
 
     elem.animateNumber({ 
 
     number: 25000 
 
     }); 
 
     break; 
 
    case 1: 
 
     elem.animateNumber({ 
 
     number: 50000 
 
     }); 
 
     break; 
 
    case 2: 
 
     elem.animateNumber({ 
 
     number: 75000 
 
     }); 
 
     break; 
 
    case 3: 
 
     elem.animateNumber({ 
 
     number: 100000 
 
     }); 
 
     break; 
 
    case 4: 
 
     elem.animateNumber({ 
 
     number: 500000 
 
     }); 
 
     break; 
 
    case 5: 
 
     elem.text("MAX"); 
 
     break; 
 
    } 
 
}; 
 

 
// BOTH buttons get the same callback function. Thus, no code 
 
// is being duplicated, any fixes I need to make all happen in 
 
// one place. Easy-peasy! 
 
$(".max").on("click", handleClick); 
 

 
$(".min").on("click", handleClick);

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script> 
 
<section class="gen-box-field"> 
 
    <button type="button" class="min">-</button> 
 
    <div class="param" id="param1">10000</div> 
 
    <button type="button" class="max">+</button> 
 
</section> 
 
<section class="gen-box-field"> 
 
    <button type="button" class="min">-</button> 
 
    <div class="param" id="param2">10000</div> 
 
    <button type="button" class="max">+</button> 
 
</section>

- がインクリメントの代わりに、減算値の結果、インクリメント/デクリメント数学は、アニメーションAFTER起こっていました。脳が離脱したか、何か。そのため、現在のクリック結果ではなく、最後のクリック結果に作用していました。代わりに、私はアニメーションの前に数学を動かし、すべては期待どおりに動作します。