通过单击图像更新具有多个列表项的合计
update total with multiple list items by clicking on images
所以我不完全确定我缺少了什么,但我似乎无法正确添加总价。不过,我可以得到每个单独的价格。
基本上,这个想法是点击一个灰色的图像,它会生成一个列表(工作),并假设它给出一个价格(确实如此),如果你点击另一个图像,它应该更新价格,这将添加到以前的价格中。
有人能告诉我我遗漏了什么或做错了什么吗?
这是我的小提琴:http://jsfiddle.net/lolsen7/Acnx4/2/
HTML:
<div id="station-builder">
<a class="tools4" href="#"> <img id="keyboard" class="part" src="http://placehold.it/100x100" alt="Keyboard"/><span class="info">apple keyboard</span></a>
<a class="tools5" href="#"><img id="mouse2" class="part" src="http://placehold.it/100x100" alt="Mouse" ><span class="info">apple mouse</span></a
</div>
<div id="summaryTotal">
<p>Get this system for as little as:</p>
</div>
<ul id="list">
<li>2201L elo Touchscreen monitor</li>
<li>Mac mini</li>
</ul>
Javascript:
$ //JS FOR HARDWARE SECTION
$(document).ready(function () {
$(".part").mouseover(function () {
if (this.className !== 'part selected') {
$(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
}
$(this).mouseout(function () {
if (this.className !== 'part selected') {
$(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
}
});
});
var list = document.getElementById("list");
var summaryTotal = document.getElementById("summaryTotal");
var sum = 0;
var total = 0;
var finalTotal = 0;
$(".part").click(function () {
if (this.className == 'part') {
$(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
console.log(this);
if (this.id == 'keyboard') {
var li = document.createElement("li");
//li.setAttribute("alt","keyboard_li");
li.setAttribute("id", "keyboard_li");
li.appendChild(document.createTextNode('Keyboard'));
list.appendChild(li);
var keyboardPrice = "59";
sum = keyboardPrice * 1.2;
console.log(sum);
total = sum / 40;
console.log(total);
var span = document.createElement('span');
span.setAttribute('id', 'keyboardTotal');
summaryTotal.appendChild(span);
$('#keyboardTotal').append(total);
}
if (this.id == 'mouse2') {
li = document.createElement("li");
li.setAttribute("id", "mouse_li");
li.appendChild(document.createTextNode('Mouse'));
list.appendChild(li);
var mousePrice = "59";
sum = mousePrice * 1.2;
console.log(sum);
total = sum / 40;
console.log(total);
var span = document.createElement('span');
span.setAttribute('id', 'mouseTotal');
summaryTotal.appendChild(span);
$('#mouseTotal').append(total);
}
} else {
$(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
console.log(this);
if (this.id == "keyboard") {
$("#keyboard_li").remove();
$('#keyboardTotal').remove();
}
if (this.id == "mouse2") {
$("#mouse_li").remove();
}
}
$(this).toggleClass('selected');
});
total = $('#keyboardTotal') + $('#mouseTotal');
});
您能做出以下更改吗?
var kbtotal = 0;//added
var mstotal = 0;//added
var keyboardPrice = 59;
sum = keyboardPrice * 1.2;
console.log(sum);
kbtotal = sum / 40; // changed
console.log(kbtotal); // changed
var mousePrice = 59;
sum = mousePrice * 1.2;
console.log(sum);
mstotal = sum / 40; // changed
console.log(mstotal); // changed
var finaltotal = parseFloat(kbtotal) + parseFloat(mstotal);
$('#finaltotal').text(finaltotal); // added
<div id="summaryTotal">
<p>Get this system for as little as: <div id="finaltotal"></div></p>
</div>
相关文章:
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- AngularJs列表ng单击以选择选项转换
- 如何在单击时创建列表
- 无法单击IBM BPM列表框的下拉图像
- 如何创建背景图像列表'URL,并使用jQuery在单击函数时应用它们
- 当链接单击-jQuery时,第二层下拉列表将隐藏
- 单击ng更改列表项的活动bg颜色
- 如何使单击时的下拉列表不悬停
- 为什么jQuery下拉列表需要单击两次
- 单击旧列表只显示上次创建的id,应在单击时显示列表id
- 如何在 *ngFor 列表中显示单击的元素,使用 Angular 2 隐藏其他元素
- Metro 应用程序中的列表视图项目单击
- 引导程序在单击另一个下拉列表时关闭下拉列表
- 单击辐射网格过滤器时不会打开下拉列表
- 在 Joomla (1.7.0) 中单击时显示嵌套列表
- 动态嵌套列表:单击时插入行,在当前元素之后
- 常见问题下拉列表 - 单击时文本颜色已更改
- 基础 6 站点 - 下拉列表:单击时窗格无法打开
- 填充文本输入时,下拉列表单击 PHP PDO
- HTML 悬停按钮列表单击事件子项