我有下表:
<table class="ui celled table unstackable" id="tblHits">
<tbody>
<tr class="five" width="50px" height="50px">
<td class="Result addNone" id="r01">01</td>
<td class="Result addNone" id="r02">02</td>
<td class="Result addNone" id="r03">03</td>
<td class="Result addNone" id="r04">04</td>
<td class="Result addNone" id="r05">05</td>
</tr>
<tr class="five" width="50px" height="50px">
<td class="Diameter add40" id="d01">Target Size</td>
<td class="Diameter add40" id="d02">Target Size</td>
<td class="Diameter add40" id="d03">Target Size</td>
<td class="Diameter add40" id="d04">Target Size</td>
<td class="Diameter add40" id="d05">Target Size</td>
</tr>
<tr class="five" width="60px" height="60px">
<td class="Stance addStance" id="s01"></td>
<td class="Stance addStance" id="s02"></td>
<td class="Stance addStance" id="s03"></td>
<td class="Stance addStance" id="s04"></td>
<td class="Stance addStance" id="s05"></td>
</tr>
</tbody>
</table>
我还有一些逻辑可以改变stance columns类来显示如下定义的不同图片:
$('#tblHits').on('click', function (evt) {
var $td = $(evt.target);
if (!$td.is('.Stance')) return;
if ($td.hasClass('addStance')) {
$td.removeClass('addStance').addClass('addStanding');
TargetsStanding += 1;
TargetsStanceND -= 1;
$('#drpTargetNo').prop('disabled', true);
} else
if ($td.hasClass('addStanding')) {
$td.removeClass('addStanding').addClass('addKneeling');
TargetsStanding -= 1;
TargetsKneeling += 1;
} else
if ($td.hasClass('addKneeling')) {
$td.removeClass('addKneeling').addClass('addProne');
TargetsKneeling -= 1;
TargetsProne += 1;
} else
if ($td.hasClass('addProne')) {
$td.removeClass('addProne').addClass('addStance');
TargetsProne -= 1;
TargetsStanceND += 1;
}
});
$('#tblHits').on('click', function (evt) {
var $td = $(evt.target);
if (!$td.is('.Result')) return;
if ($td.hasClass('addNone')) {
$td.removeClass('addNone').addClass('addHit');
Score += 1;
TargetsLeft -= 1;
TargetsHit += 1;
$('#txtTargetsLeft').val(TargetsLeft);
$('.resultHits').html(Score);
$('.resultTotal').html(parseInt(Score) + parseInt(TargetsMissed));
$('#drpTargetNo').prop('disabled', true);
} else
if ($td.hasClass('addHit')) {
$td.removeClass('addHit').addClass('addMiss');
Score -= 1;
TargetsHit -= 1;
TargetsMissed += 1;
$('.resultHits').html(Score);
$('.resultMisses').html(TargetsMissed);
$('.resultTotal').html(parseInt(Score) + parseInt(TargetsMissed));
} else
if ($td.hasClass('addMiss')) {
$td.removeClass('addMiss').addClass('addNone');
TargetsLeft += 1;
TargetsMissed -= 1;
$('.resultMisses').html(TargetsMissed);
$('.resultTotal').html(parseInt(Score) + parseInt(TargetsMissed));
$('#txtTargetsLeft').val(TargetsLeft);
}
});
所以我想要的是,当我们点击结果表行列或站点行列时,我想检查结果是否有类&add;&#39; addHit&#39;或者&#39; addMiss&#39;并更新一些变量,以便我可以计算点击和未命中的数字。
我想弄清楚的jquery代码是从立场的角度来看:
$('.Stance').on('click', function (e) {
var hits = 0;
var misses = 0;
// Alert($('.Result').attr($(this).attr('id')));
$('.Result').html($(this).attr('id'));
if ($('.Result').attr($(this).attr('id')).hasClass('addHit')) {
hits +=1;
}
else if($('.Result').attr($(this).attr('id')).hasClass('addMiss')) {
misses +=1;
}
else{
hits-=1;
misses-=0;
}
alert(hits + "were hit and " + misses + "were missed");
});
如果你点击结果行列或关于此代码的stance row列,我可以如何计算命中数值?我想,如果我点击s01栏,我想检查一下r01是否有类addHit。具有类结果,立场和直径的行上带有01的所有ID应以某种方式连接在一起。我将非常感谢任何帮助!
答案 0 :(得分:1)
我发现这是复杂的做法。所以我创建了另一个函数,而不是在我们点击按钮统计信息时加载它,如下所示:
function checkStatistics() {
TargetsStandingHit = 0;
TargetsKneelingHit = 0;
TargetsProneHit = 0;
TargetsStanceHit = 0;
TargetsHit10mm = 0;
TargetsHit15mm = 0;
TargetsHit25mm = 0;
TargetsHit30mm = 0;
TargetsHit40mm = 0;
TargetsDiameterHit = 0;
$('.Result').each(function () {
//Hide it
var value = $('#drpTargetNo').val();
//alert(value);
if ($(this).html() <= value) {
splitresult = 'r' + $(this).html()
splitvalue = 's' + $(this).html()
splitvalue2 = 'd' + $(this).html()
//alert($('.Stance').attr('id') = 's'+splitvalue);
if ($("[id='" + splitresult + "']").hasClass('addHit')) {
if ($("[id='" + splitvalue + "']").hasClass('addStanding')) {
//alert($("[id='" + splitvalue + "']").attr('id'));
TargetsStandingHit += 1;
} else
if ($("[id='" + splitvalue + "']").hasClass('addKneeling')) {
TargetsKneelingHit += 1;
} else
if ($("[id='" + splitvalue + "']").hasClass('addProne')) {
TargetsProneHit += 1;
}
else
if ($("[id='" + splitvalue + "']").hasClass('addStance')) {
TargetsStanceHit += 1;
}
if ($("[id='" + splitvalue2 + "']").html() == '10mm') {
//alert($("[id='" + splitvalue + "']").attr('id'));
TargetsHit10mm += 1;
} else
if ($("[id='" + splitvalue2 + "']").html() == '15mm') {
TargetsHit15mm += 1;
} else
if ($("[id='" + splitvalue2 + "']").html() == '25mm') {
TargetsHit25mm += 1;
}
else
if ($("[id='" + splitvalue2 + "']").html() == '30mm') {
TargetsHit30mm += 1;
}
else
if ($("[id='" + splitvalue2 + "']").html() == '40mm') {
TargetsHit40mm += 1;
}
else
if ($("[id='" + splitvalue2 + "']").html() == 'Target Size') {
TargetsDiameterHit += 1;
}
}
}
});
}