切换父级DIV与具有相似ID的子级元素以计算其价格

Question

I am trying that, when below page is loaded by default to show a1 div and just calculate price for that div and display in total eg 216. 我正在尝试，默认情况下在加载以下页面时显示a1 div并仅计算该div的价格并总计显示，例如216。

And when user click on change link/button, it should hide the a1 and display a2 div and calculate the price just for a2 eg 201. 当用户单击更改链接/按钮时，它应该隐藏a1并显示a2 div并仅针对a2计算价格，例如201。

Could anyone guide me as to how can this be achieved? 谁能指导我如何实现这一目标？ have been trying, so far with no luck. 一直在尝试，到目前为止没有运气。

This is the snapshot of the code I am working, representing its logic. 这是我正在工作的代码的快照，表示其逻辑。 I hope it gives clearer picture of my situation. 我希望它能更清楚地了解我的情况。

<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

You would need to restructure a few things, firstly having two elements with the same ID is not going to help you. 您需要重组一些内容，首先，两个具有相同ID的元素将无济于事。 I have restructured using a class called .selected : 我已经使用名为.selected的类进行了重组：

http://jsfiddle.net/5tDUM/ http://jsfiddle.net/5tDUM/

CSS: CSS：

.selected {
    display:block !important;
}

HTML: 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: 使用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 's are meant to be unique. ID是唯一的。 You'd be better of to use class . 您最好使用class 。
Alternatively you could get all span tags with flds=document.getElementsByTagName('span') and reference them like an array: flds[0] and flds[1] (since every div has 2 spans, price and quantity in that order). 或者，您可以使用flds=document.getElementsByTagName('span')获取所有span标签，并像数组一样引用它们： flds[0]和flds[1] （因为每个div都有2个span，价格和数量按该顺序）。

Also, a div is usually a block (by default), so you probably don't need to specify that using inline style declarations. 另外，div通常是一个块（默认情况下），因此您可能不需要使用内联样式声明来指定它。

The anchor is 'weird' to.. try something more sane: <a href="#" onclick="change(); return false;">Change</a> 锚点是“怪异的”，..尝试更加理智的方法： <a href="#" onclick="change(); return false;">Change</a>

Answer 3

Try 尝试

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

Demo: Fiddle 演示：小提琴

Note: The ID attribute should be unique in a document, in your case you have the id price and quantity repeating, you can change it to class attribute. 注意：ID属性在文档中应该是唯一的，如果您重复使用ID price和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>

Then 然后

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

Demo: Fiddle 演示：小提琴

Answer 4

first of all.... all your IDs should be unique... (though it may work)... change it to class and you can use hide() and show() to hide and display... text() to get the text between the span tag. 首先...。所有ID都应该是唯一的...（尽管可能有效）...将其更改为class，然后可以使用hide（）和show（）来隐藏和显示... text()获取span标签之间的文本。

note: it is always better to use the click event than the inline javascript.. 注意：使用click事件总是比内联javascript更好。

HTML 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 使用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

There were a few problems with your code: 您的代码存在一些问题：

price and quantity should be classes since there are more than one. price和quantity应分类，因为quantity不止一个。 id needs to be unique. id必须是唯一的。
You were missing ); 您不见了); from the end of your document ready. 从文档末尾准备好。
You should be specifying the number base in parseInt() otherwise weirdness can occur. 您应该在parseInt()指定数字基数，否则可能会发生怪异。 We want base 10 since we want a decimal number like parseInt(num, 10) 我们想要以10为底，因为我们想要一个十进制数字，例如parseInt(num, 10)
You can add a class .hide and toggle it to switch between showing div s. 您可以添加一个类.hide并切换它以在显示div之间切换。
val() is used on <input> tags, use .text() on <span> s to get their text. val()上使用<input>标签，使用.text()上<span> s到获得他们的文字。

Here it is with everything fixed up and working: 这是所有已修复并可以正常工作的地方：

jsFiddle 的jsfiddle

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

切换父级DIV与具有相似ID的子级元素以计算其价格

问题描述

5 个解决方案

解决方案1
1 已采纳 2013-04-01 12:28:59

解决方案2
0 2013-04-01 12:11:35

解决方案3
0 2013-04-01 12:20:23

解决方案4
0 2013-04-01 12:20:38

解决方案5
0 2013-04-01 12:21:02

切换父级DIV与具有相似ID的子级元素以计算其价格

问题描述

5 个解决方案

解决方案1 1 已采纳 2013-04-01 12:28:59

解决方案2 0 2013-04-01 12:11:35

解决方案3 0 2013-04-01 12:20:23

解决方案4 0 2013-04-01 12:20:38

解决方案5 0 2013-04-01 12:21:02

解决方案1
1 已采纳 2013-04-01 12:28:59

解决方案2
0 2013-04-01 12:11:35

解决方案3
0 2013-04-01 12:20:23

解决方案4
0 2013-04-01 12:20:38

解决方案5
0 2013-04-01 12:21:02