根据单击的行和行行更新类和变量的表

时间:2018-02-20 14:36:19

标签: javascript jquery html css

我有下表:

<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应以某种方式连接在一起。我将非常感谢任何帮助!

1 个答案:

答案 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;
                                    }
            }
        }
    });

}