1

我正在尝试，当默认情况下加载下面的页面以显示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>
4

5 回答 5

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


});
于 2013-04-01T12:28:59.957 回答
0

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

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

主播很“奇怪”……尝试一些更理智的东西：<a href="#" onclick="change(); return false;">Change</a>

于 2013-04-01T12:11:35.193 回答
0

尝试

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重复，您可以将其更改为 class 属性。

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

演示：小提琴

于 2013-04-01T12:20:23.707 回答
0

首先....您所有的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')
  });
});

在这里摆弄

于 2013-04-01T12:20:38.527 回答
0

您的代码存在一些问题：

  • price并且quantity应该是类，因为有不止一个。id必须是独一无二的。
  • );您在准备好的文档末尾丢失了。
  • 您应该指定数字基数，parseInt()否则可能会发生奇怪的情况。我们想要以 10 为底，因为我们想要一个十进制数parseInt(num, 10)
  • 您可以添加一个类.hide并切换它以在显示divs 之间切换。
  • val()在<input>标签上使用.text()，在<span>s 上使用来获取它们的文本。

一切都已修复并正常工作：

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();
});
于 2013-04-01T12:21:02.523 回答