0

私はこれを機能させようとして失敗したので、専門家に尋ねる時間です。

次の HTML があります。

<input type="button" value="-" class="minus">
<input type="number" value="20" class="input-text">
<input type="button" value="+" class="plus">

<div class="newprice">
    20
</div>

javascript を使用して (jQuery 固有で問題ありません)、誰かがプラス ボタンをクリックすると、.newprice div 内の数値が 20 ずつ増加するようにする必要があります。同様に、マイナス ボタンを押すと、数値が 20 減少します。 .

.input-text フィールドで小さな上下矢印を使用する場合も同様です。

または、ボタンを使用する代わりに値を入力すると、それに応じて .input-text div の数値が変更されます (誰かが 3 を入力した場合、.input-text 数値は 60 に変更されます)。

PS: .newprice div を代わりにテキスト フィールドにする方が簡単な場合。どんな作品でも。

[これをすべて文脈に入れるために、基本的にはショッピングカートの一部ですが、数量を入力したときに製品に支払う金額をユーザーに示しようとしています. たとえば、製品の価格は 20 ドルで、3 個必要な場合、(カートに追加する前に) すぐに 60 ドルかかることがわかります。]

私はそれを適切に説明したことを願っています。

前もって感謝します。

4

4 に答える 4

4

あなたはこれを行うことができます。

// how many to increment each button click
var increment = 20;

$('.plus, .minus').on('click', function() {
    // the current total
    var total = parseInt($('#newprice').text());

    // increment the total based on the class
    total += (this.className == 'plus' ? 1 : -1) * increment;

    // update the div's total
    $('#newprice').text(total);
    // update the input's total
    $('.input-text').val(total);
});

$('.input-text').on('change', function() {
    // update the div's total
    $('#newprice').text( $(this).val() );
});

コメントに基づいて編集

// how many to increment each button click
var increment = 20;

$('.plus, .minus').on('click', function() {
    // the current total
    var total = parseInt($('#newprice').text());

    // increment the total based on the class
    total += (this.className == 'plus' ? 1 : -1) * increment;

    // update the div's total
    $('#newprice').text(total);
});

$('.input-text').on('change', function() {
    // update the div's total
    $('#newprice').text( $(this).val() );
});

step入力した数値を 20 ずつ増やすには、次のように属性を追加します。その属性の数値は、上下のボタンが押されるたびに値が増加する量を表します。

<input type="number" value="20" step="20" class="input-text">
于 2013-05-30T03:47:26.307 に答える
1

基本料金を処理するために、いくつかの計算と html を既に追加しています。jsfiddle でデモを見る

HTML:

Price per item:<input name="basicPrice" value="20" class="input-text">
<br />
<input type="button" value="-" class="minus">
<input name="quantity" id="quantity" type="number" value="1"  class="input-text">
<input type="button" value="+" class="plus">
<br />Money much pay:
<span class="newprice">20</span>

jqueryによるJS：

function calculate(){
    var basicPrice = parseInt($(":input[name='basicPrice']").val());
    var quantity = parseInt($(":input[name='quantity']").val());
    console.log(quantity);
    var total = basicPrice * quantity;
    $(".newprice").text(total);
}
function changeQuantity(num){
    $(":input[name='quantity']").val( parseInt($(":input[name='quantity']").val())+num);
}
$().ready(function(){
    calculate();
    $(".minus").click(function(){
        changeQuantity(-1);
        calculate();
    });
    $(".plus").click(function(){
        changeQuantity(1);
        calculate();
    });
    $(":input[name='quantity']").keyup(function(e){
        if (e.keyCode == 38) changeQuantity(1);
        if (e.keyCode == 40) changeQuantity(-1);
        calculate();
    });
      $(":input[name='basicPrice']").keyup(function(e){
        calculate();
    });
    var quantity = document.getElementById("quantity");
    quantity.addEventListener("input", function(e) {
        calculate();
    });
});

サポートが必要な場合はお知らせください。

于 2013-05-30T04:15:36.617 に答える
1

これは純粋なJSの例ですが、IE9より下のものはすべてキャッチすると信じています。イベントリスナーもアタッチする必要があります。

jsフィドル

<form>
   <input type="button" id="value-change-dec" value="-">
   <input type="text" id="new-price" value="0" disabled>
   <input type="button" id="value-change-inc" value="+">
   <br>
   <input type="number" id="change-price">
</form>

document.getElementById("value-change-dec").addEventListener("click", function() {
    var value = parseInt(document.getElementById('new-price').value);
    value=value-20;
    document.getElementById('new-price').value = value;
});

document.getElementById("value-change-inc").addEventListener("click", function() {
    var value = parseInt(document.getElementById('new-price').value);
    value=value+20;
    document.getElementById('new-price').value = value;
});

function changeIt() {
    document.getElementById('new-price').value = document.getElementById('change-price').value*20;
}

var changer = document.getElementById('change-price');
changer.addEventListener('keydown', changeIt, false);
changer.addEventListener('keyup', changeIt, false);
changer.addEventListener('click', changeIt, false);
于 2013-05-30T04:03:25.917 に答える
1

できるよ...

var $counter = $('.counter');

$('button').on('click', function(){
  var $button = $(this);
  $counter.text(function(i,val){
    return +val + ( $button.hasClass('up') ? 1 : - 1 );
  });
});

このHTMLで...

<div class="counter">10</div>
<button class="down">-</button>
<button class="up">+</button>

記録として、確実にカウンター要素の入力を使用する必要があります。

于 2013-05-30T03:53:55.957 に答える