Question

我想在页面上放置图形元素，每个元素代表相同的美元值。默认情况下，这些元素将是相同的颜色（白色），并且可以看到基本金额（总计）。然后，用户可以单击图形元素并更改其颜色（黄色），这样做可以增加显示的美元金额（总计）。他们还应该能够点击黄色图形元素来“停用它”并将其颜色改回白色。此外，这样做会减去总数 - 或者至少单击一个重置按钮将所有元素恢复为默认值。

如何判断我的搜索查询，以便我可以获得更好的结果或任何可以帮助我拼凑解决方案的网络参考。

Answer 1

这是有效的：http://jsfiddle.net/9tdgxuh9/

var box = $('.box');
var price = 10;
var n = 5;

while (n--) box.clone().appendTo($('body'));

box = $('.box');

box.find('.color').click(function(){ 
    $(this).removeClass('yellow').siblings('p').text(price);
});


box.find('p').text(price).click(function(){
    var val = parseInt($(this).text())+1;
    $(this).text(val);
    if (val>price) $(this).siblings('.color').addClass('yellow');
});

在点击时更改图形元素的颜色并添加到显示的美元金额

1 个答案: