极客观点
项目管理
HarmonyOS
遇到这么一个需求：
就是可打分数要随着他的打分后要变化，也就是减掉他打分的分数。
想要的结果是打分之后，可打分数减去打分的分数，当更改打分的分数后，当前可打分数复原然后再减去更改的分数。
html代码:
<div id="wrap">
<header>
<div class="clearfix">
<span class="name">队长打分</span>
<span class="mark">当前可打分数<em><!-- 120 --></em>分</span>
</div>
<div class="pro_info">团队分10%为队长，50%平均，40%队长可奖励给优秀队员，打完分后请记得点击确认！</div>
</header>
<div id="main">
<ul class="play_info">
</ul>
</div>
<div id="footer" onclick="confirm_mark()">确 认</div>
</div>js代码：
//获取队长当前可打分数
var ava_fra;
function captain_fraction(){
$.ajax({
url: serverurl,
type: "GET",
data: {
type:'10073',
actid:'100050',
tem:'4'
},
dataType:'JSON',
success: function(result) {
result=eval("("+result+")");
ava_fra = result;
$('.mark em').html(ava_fra);
get_team_info();
},
error: function(jqXHR, textStatus, errorThrown) {
alert('通讯失败，请刷新重试！');
}
});
}
var fraction=[];
//获取队员信息
function get_team_info(){
$.ajax({
url: serverurl,
type: "GET",
data: {
type:'10071',
actid:'100050',
tem:'4'
},
dataType:'JSON',
success: function(result) {
result=eval("("+result+")");
$.hideLoading();
var str = '';
for (var i = 0; i < result.length; i++) {
str += '<li>'
+ '<div class="item">'
+ '<img src="'+result[i].headimgurl+'" alt="">'
+ '</div>'
+ '<div class="info">'
+ '<div class="nickname more">'+result[i].nickname+'</div>'
+ '<div class="id">'+result[i].jobname+'</div>'
+ '</div>'
+ '<div class="fr_btn">'
+ '<span class="prompt">未打分</span>'
+ '<span class="btn" onclick="mark(this,'+result[i].id+')">打分</span>'
+ '</div>'
+ '</li>'
}
$('.play_info').html(str);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('通讯失败，请刷新重试！');
}
});
}
//打分
function mark(e,id){
$.prompt("", "请输入您要打的分数", function(text) {
var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
if (!re.test(text)) {
$.toptips('请输入数字！');
return false;
}
$(e).siblings('.prompt').html('已打'+'<em>'+text+'</em>'+'分');
// var num = text.replace(/[^0-9]/ig,""); //在字符串中提取数字
$(e).text('更改');
var num = $(e).siblings('.prompt').find('em').text();
// 筛选出更改对象
var obj = fraction.filter(function(value) {
return value.userid === Number(id);
})[0];
// id对应的对象不存在
if (!obj) {
fraction.push({
userid: id,
mark: num
})
return
}
// 对象存在，修改分数
obj.mark = num;
}, function() {
//取消操作
});
}
请教一下这个该怎么做。。谢过哈
**打分修改后的代码：**//打分
function mark(e,id){
$.prompt("", "请输入您要打的分数", function(text) {
var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
if (!re.test(text)) {
$.toptips('请输入数字！');
return false;
}
$(e).siblings('.prompt').html('已打'+'<em>'+text+'</em>'+'分');
// var num = text.replace(/[^0-9]/ig,""); //在字符串中提取数字
$(e).text('更改');
var num = $(e).siblings('.prompt').find('em').text();
var diff = 0;
// 筛选出更改对象
var obj = fraction.filter(function(value) {
return value.userid === Number(id);
})[0];
// id对应的对象不存在
if (!obj) {
fraction.push({
userid: id,
mark: num
})
diff = num; // 计算差值
console.log("diff："+diff);
}else{
diff = obj.mark - num; // 计算差值
console.log(diff)
// 对象存在，修改分数
obj.mark = num;
}
var $markDom = $('.mark em');
// 刷新分数
$markDom.html(Number($markDom.html()) + diff);
console.log("$markDom.html()："+$markDom.html());
}, function() {
//取消操作
});
}但是有个问题就是修改后的分数第一次被追加到了可打分数后面，而且后面再修改也是不准确，如图：
再次修改代码后：
//打分
function mark(e,id){
$.prompt("", "请输入您要打的分数", function(text) {
var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
if (!re.test(text)) {
$.toptips('请输入数字！');
return false;
}
$(e).siblings('.prompt').html('已打'+'<em>'+text+'</em>'+'分');
// var num = text.replace(/[^0-9]/ig,""); //在字符串中提取数字
$(e).text('更改');
var num = Number($(e).siblings('.prompt').find('em').text());
var diff = 0;
// 筛选出更改对象
var obj = fraction.filter(function(value) {
return value.userid === Number(id);
})[0];
// id对应的对象不存在
// if (!obj) {
// fraction.push({
// userid: id,
// mark: num
// })
// return;
// }
// obj.mark = num;
// id对应的对象不存在
if (!obj) {
fraction.push({
userid: id,
mark: num
})
diff = num; // 计算差值
} else {
// 对象存在，修改分数
obj.mark = num;
diff = obj.mark - num; // 计算差值
}
console.log("diff："+diff)
var $markDom = $('.mark em');
// 刷新分数
$markDom.html(Number($markDom.html()) - diff);
console.log("$markDom.html："+$markDom.html())
}, function() {
//取消操作
});
}结果：
想要的结果是打分之后，可打分数减去打分的分数，当更改打分的分数后，当前可打分数复原然后再减去更改的分数。
再次修改代码后：
//打分
function mark(e,id){
$.prompt("", "请输入您要打的分数", function(text) {
var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
if (!re.test(text)) {
$.toptips('请输入数字！');
return false;
}
$(e).siblings('.prompt').html('已打'+'<em>'+text+'</em>'+'分');
// var num = text.replace(/[^0-9]/ig,""); //在字符串中提取数字
$(e).text('更改');
var num = Number($(e).siblings('.prompt').find('em').text());
var diff = 0;
// 筛选出更改对象
var obj = fraction.filter(function(value) {
return value.userid === Number(id);
})[0];
// id对应的对象不存在
// if (!obj) {
// fraction.push({
// userid: id,
// mark: num
// })
// return;
// }
// obj.mark = num;
// id对应的对象不存在
if (!obj) {
fraction.push({
userid: id,
mark: num
})
diff = num; // 计算差值
} else {
diff = num - obj.mark; // 计算差值
// 对象存在，修改分数
obj.mark = num;
}
console.log("diff："+diff)
var $markDom = $('.mark em');
// 刷新分数
$markDom.html(Number($markDom.html()) - diff);
console.log("$markDom.html："+$markDom.html());
}, function() {
//取消操作
});
}结果：
源生除了另一个问题：
当我打分输入等于或者超过12分的时候，就成这样了，当前可打分数是(总分*0.4)
结果修改：
html5
又是你喔...
可以在“更改”按钮的回调函数里面写剩余分数的计算逻辑。
回调函数代码
注意这里，确保数字类型