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>

Answer 1

您需要重新构建一些内容，首先要使用具有相同ID的两个元素不会对您有所帮助。我使用名为.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();


});

Answer 2

ID的意思是独一无二的。你最好使用class 或者，您可以使用span获取所有flds=document.getElementsByTagName('span')代码，并像数组一样引用它们：flds[0]和flds[1]（因为每个div都有2个跨度，按此顺序定价和数量）

此外，div通常是一个块（默认情况下），因此您可能不需要使用内联样式声明来指定它。

锚点是“奇怪的”...尝试更健全的事情：<a href="#" onclick="change(); return false;">Change</a>

Answer 3

尝试

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

演示：Fiddle

注意：ID属性在文档中应该是唯一的，如果您重复了price和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'));
});

演示：Fiddle

Answer 4

首先....你的所有ID都应该是唯一的......（虽然它可能有效）...将它改为类，你可以使用hide（）和show（）来隐藏和显示...... text()获取span代码之间的文字。

注意：使用click事件总是比内联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')
  });
});

fiddle here

Answer 5

您的代码存在一些问题：

price和quantity应该是类，因为不止一个。 id需要独一无二。
您准备好文档末尾的);。
您应该在parseInt()中指定数字基数，否则可能会出现奇怪现象。我们想要基数10，因为我们需要像parseInt(num, 10)
您可以添加课程.hide并将其切换为在显示div之间切换。
val()用于<input>代码，使用.text()上的<span>获取文字。

这里有一切都已修好并正常工作：

jsFiddle

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

使用类似ID的子元素切换父DIV以计算其价格

5 个答案: