javascript - 親 DIV と同様の ID の子要素を切り替えて、それらの価格を計算します

Question

下のページがデフォルトで読み込まれ、a1 div が表示され、その div の価格が計算され、合計で 216 などと表示されるようにしようとしています。

ユーザーがリンク/ボタンの変更をクリックすると、a1 が非表示になり、a2 div が表示され、a2 の価格 (例: 201) が計算されます。

これをどのように達成できるかについて誰かが私を導くことができますか? これまでのところ、運がありませんでした。

これは、私が作業しているコードのスナップショットであり、そのロジックを表しています。私の状況をより明確に把握できることを願っています。

<script type="text/javascript">
    function prc_calc() {
        $price = parseInt($('#price').attr('value'));
        $quantity = parseInt($('#quantity').attr('value'));
        $sum = $price * $quantity;
        $('#total').text($sum);
    }

    function change() {
        prc_calc();
    }

    $(document).ready(function() {
        prc_calc();
    }
</script>

<body>
    <div id="a1" style="display:block">
        <span id="price">54</span>
        <span id="quantity">4</span>
    </div>

    <div id="a2" style="display:none">
        <span id="price">67</span>
        <span id="quantity">3</span>
    </div>

    <span id="total"></span>

    <a href="javascript:void(0);" onclick="change();">Change</a>
</body>

score 1 · Accepted Answer

いくつかのことを再構築する必要があります。まず、同じ ID を持つ 2 つの要素を持つことは役に立ちません。.selected というクラスを使用して再構築しました。

http://jsfiddle.net/5tDUM/

CSS:

.selected {
    display:block !important;
}

HTML:

<body>
    <div id="a1" style="display:none" class="selected">
        <span class="price">54</span>
        <span class="quantity">4</span>
    </div>

    <div id="a2" style="display:none">
        <span class="price">67</span>
        <span class="quantity">3</span>
    </div>

    <span id="total"></span>

    <a id="changeclick">Change</a>
</body>

Javascript:

function prc_calc() {

        var price = $('.selected .price').text();

        var quantity = $('.selected .quantity').text();
        var sum = price * quantity;
        $('#total').text(sum);

    }

function changeprice() {

    }

    $(document).ready(function() {

        prc_calc();
    });


$('#changeclick').click(function() {
     $('#a1').toggleClass('selected');
     $('#a2').toggleClass('selected');
        prc_calc();


});

score 0 · Accepted Answer

IDは一意であることを意味します。を使ったほうがいいですclass。または、配列のようにすべてのタグを
取得して参照することもできます: and (すべての div には 2 つのスパン、価格と数量がこの順序で含まれているため)。spanflds=document.getElementsByTagName('span')flds[0]flds[1]

また、div は通常 (デフォルトで) ブロックであるため、インラインスタイル宣言を使用して指定する必要はおそらくありません。

アンカーは「奇妙」です..もっと正気なことを試してください：<a href="#" onclick="change(); return false;">Change</a>

score 0 · Accepted Answer

試す

function prc_calc(el) {
    $price = parseInt($('[id="price"]', el).text());
    $quantity = parseInt($('[id="quantity"]', el).text());
    $sum = $price * $quantity;
    $('#total').text($sum);
}

function change() {
    $('#a1').hide();
    prc_calc($('#a2').show());
}

$(document).ready(function() {
    prc_calc($('#a1'));
});

デモ:フィドル

注: ID 属性はドキュメント内で一意である必要があります。あなたの場合、idpriceとquantity繰り返しがある場合は、それをクラス属性に変更できます。

<div id="a1" style="display:block">
    <span class="price">54</span>
    <span class="quantity">4</span>
</div>

<div id="a2" style="display:none">
    <span class="price">67</span>
    <span class="quantity">3</span>
</div>

<span id="total"></span>

<a href="javascript:void(0);" onclick="change();">Change</a>

それで

function prc_calc(el) {
    $price = parseInt($('.price', el).text());
    $quantity = parseInt($('.quantity', el).text());
    $sum = $price * $quantity;
    $('#total').text($sum);
}

function change() {
    $('#a1').hide();
    prc_calc($('#a2').show());
}

$(document).ready(function() {
    prc_calc($('#a1'));
});

デモ:フィドル

score 0 · Accepted Answer

まず第一に....すべてのIDは一意でなければなりません...（それはうまくいくかもしれませんが）...クラスに変更すると、hide（）とshow（）を使用して非表示と表示を行うことができますtext()...spanタグ間のテキスト。

注: インライン JavaScript よりもクリックイベントを使用することをお勧めします。

HTML

<div id="a1" style="display:block">
    <span class="price">54</span>
    <span class="quantity">4</span>
</div>

<div id="a2" style="display:none">
    <span class="price">67</span>
    <span class="quantity">3</span>
</div>

<span id="total"></span>

<a href="javascript:void(0);" id="change">Change</a>

JavaScript/jquery

function change(obj1, obj2) {
  $('#' + obj1).show();
  $('#' + obj2).hide();
  $price = parseInt($('#' + obj1).find('.price').text());
  $quantity = parseInt($('#' + obj1).find('.quantity').text());
  $sum = $price * $quantity;
  $('#total').text($sum);
}


$(document).ready(function () {
  change('a1', 'a2');
  $('#change').click(function () {
    change('a2', 'a1')
  });
});

ここでフィドル

score 0 · Accepted Answer

コードにいくつかの問題がありました:

pricequantity複数あるため、クラスにする必要があります。id一意である必要があります。
);準備完了のドキュメントの末尾から欠落していました。
基数を指定する必要がありparseInt()ます。そうしないと、奇妙なことが発生する可能性があります。次のような10進数が必要なので、基数10が必要ですparseInt(num, 10)
クラス.hideを追加して切り替えて、表示を切り替えることができますdiv。
val()は<input>タグで使用.text()され、<span>s を使用してテキストを取得します。

ここでは、すべてが修正され、機能しています。

jsフィドル

HTML

<div id="a1"> 
    <span class="price">54</span>
    <span class="quantity">4</span>
</div>
<div id="a2" class="hide">
    <span class="price">67</span>
    <span class="quantity">3</span>
</div>
<span id="total"></span>
<a href="javascript:void(0);" onclick="change();">Change</a>

JS

function prc_calc() {
    var id = $('#a1').hasClass('hide') ? '#a2' : '#a1';
    var $price = parseInt($(id + ' .price').text(), 10);
    var $quantity = parseInt($(id + ' .quantity').text(), 10);
    var $sum = $price * $quantity;
    $('#total').text($sum);
}

function change() {
    $('#a1,#a2').toggleClass('hide');
    prc_calc();
}

$(document).ready(function () {
    prc_calc();
});

javascript - 親 DIV と同様の ID の子要素を切り替えて、それらの価格を計算します

5 に答える 5

Related

Reference