Question

我仍然是javascript的新手（请原谅我沉闷）。我目前正在研究一段脚本，它将根据点击的图像显示整数之和。此外，有三组代表住房特征的两个图像，用户可以从每个组中选择一个（两个）。每个选项对应一个不同的数值价格，然后根据用户选择的三个特征，p-tag将返回价格总和。

有人可以给我建议或证明如何实现这一目标吗？

我的HTML：

<div id="wrapper">

 <div id="kitchen" align="left"> 
    <img id="pricetile2" src="../Images/french.png">
    <img id="pricetile3" src="../Images/german.png">
 </div>

 <div id="floor" align="left">
    <img id="pricetile4" src="../Images/mixed.png">
    <img id="pricetile5" src="../Images/allwood.png">
 </div>

 <div id="energy" align="left">
    <img id="pricetile6" src="../Images/green.png">
    <img id="pricetile7" src="../Images/standard.png">
 </div>
</div>

<div id="price"> <p id="calc">total$here</div>

我的剧本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>

<script>

var x = calculate();
var a
var b
var c

  $('#pricetile2').click(function(){
        a = 2;
  });
  $('#pricetile3').click(function(){
        a = 3;
  });
  $('#pricetile4').click(function(){
        b = 4;
  });
  $('#pricetile5').click(function(){
        b = 5;
  });
  $('#pricetile6').click(function(){
        c = 6;
  });
  $('#pricetile7').click(function(){
        c = 7;
  });

function calculate(a, b, c){
    return a + b + c;
}
document.getElementById("calc").innerHTML = x;

</script>

Answer 1

此脚本的作用：点击检查以查看点击的内容，如果是容器内的图像，则查找当前所选项目（如果有）并将其设置为非活动状态。然后将单击的元素设置为活动状态。更改选择后，循环遍历所有行以查找每行的选定项目，并将data-price=""属性的值一起添加，然后将该值发布在<span id="total"></span>

中

＆＃13;

(function () {
    "use strict";
    var wrap = document.getElementById('wrapper'),
        total = document.getElementById('total'), 
        lines = wrap.children, line;
    wrap.addEventListener('click', function (e) {
        if (e.target.className.indexOf('pricetile') >= 0) {
            var selected = e.target.parentElement.getElementsByClassName('selected')[0];
            if(selected) selected.className = selected.className.replace(' selected', '');
            e.target.className += ' selected';
            var sum = 0;
            for (var i = 0; line = lines[i]; i++) {
                var selected = line.getElementsByClassName('selected')[0];
                if (selected) sum = sum + Number(selected.dataset.price);
            }
            total.innerHTML = Number(sum).toFixed(2);
        }
    }, false);
})();

＆＃13;

<div id="wrapper">
    <div id="kitchen">
        <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="100">
        <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="200">
    </div>
    <div id="floor">
        <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="300">
        <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="400">
    </div>
    <div id="energy">
        <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="500">
        <img src="http://lorempixel.com/50/50/" class="pricetile" data-price="600">
    </div>
</div>
<div id="price">total: $<span id="total">0.00</span></div>

＆＃13;

Answer 2

尝试使用数据属性并在点击时重新计算总数：

$(function() {
  $('img.select').on('click', function() {
    $(this).toggleClass('pick').siblings().removeClass('pick'); //remove previous selection
    var sum = 0.0;
    $('img.pick').each(function() { //loop all chosen 
      sum += +($(this).data('price')); //note its parsing
    });
    $('#total').text(sum.toFixed(2));
  });
});

img.select {
  /* to select */
  cursor: pointer;
  padding: 5px;
  border: 1px solid #bbb;
  width: 35px;
  height: 35px;
  margin-bottom: 5px;
}
img.pick {
  /* chosen */
  border-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="kitchen">
    <img src="" data-price="1" class='select'>
    <img src="" data-price="2" class='select'>
  </div>
  <div id="floor">
    <img src="" data-price="3" class='select'>
    <img src="" data-price="4" class='select'>
  </div>
  <div id="energy">
    <img src="" data-price="5" class='select'>
    <img src="" data-price="6" class='select'>
  </div>
</div>
<div id="price">Total: $<span id="total">0.00</span>
</div>

Javascript - 如何根据点击的对象返回变量之和

2 个答案: