将父DIV's与ID相似的子元素切换以计算其价格

Toggle parent DIV's with child elements of similar ID to calculate their price

本文关键字：元素 计算 DIV 相似 ID 将父      更新时间：2023-09-26

我正在尝试，当下面的页面默认加载时显示a1div，只是计算该div的价格并显示总数，例如216.

当用户点击更改链接/按钮时，它应该隐藏a1并显示a2div并计算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>

您需要重新构建一些东西，首先，具有相同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();

});

ID必须是唯一的。你最好用class。
或者，您可以使用flds=document.getElementsByTagName('span')获得所有span标记，并像数组一样引用它们:flds[0]和flds[1](因为每个div都有2个跨度，价格和数量按此顺序)。

另外，div通常是一个块(默认情况下)，所以您可能不需要使用内联样式声明来指定它。

锚是"奇怪的"…试试更理智的:<a href="#" onclick="change(); return false;">Change</a>

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

演示:小提琴

注意:ID属性在文档中应该是唯一的，在您的情况下，您有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'));
});

演示:小提琴

你的代码有几个问题:

  • price和quantity应该是类，因为它们不止一个。id必须是唯一的
  • 你的文档末尾缺少);。
  • 你应该在parseInt()中指定数字基数，否则会发生奇怪的情况。我们需要以10为基数，因为我们需要像parseInt(num, 10)
    • 这样的十进制数
  • 你可以添加一个类.hide，并在显示div s之间切换。
  • val()用于<input>标签，.text()用于<span>标签以获取其文本。

这是一切都修复和工作:

jsFiddle 

<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都应该是唯一的…(虽然它可能有效)……将其更改为class，您可以使用hide()和show()来隐藏和显示…text()获取span标签之间的文本。

注意:使用click事件总是比使用内联javascript要好。

<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>
jquery javascript/

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

小提琴

相关文章：