Question

我有一张桌子。当我点击td时它会为该td添加背景颜色，颜色取决于选中的单选按钮，然后它将计算有多少td具有xxx背景颜色。

您可以查看JSFiddle上的演示。您必须先检查单选按钮。

这是我的JS。

var method1 = 0;
var method2 = 0;
var method3 = 0;
var method4 = 0;
var method5 = 0;
var clickedTeeth;

$('td').click(function(){
    if($('input[type=radio]').is(':checked')) {
            var clickingTeeth = $(this).attr('id');
            if(clickedTeeth == clickingTeeth) {

        } else {
            clickedTeeth = clickingTeeth;
            var color;
            var value = $("input:radio:checked").val();
            value = parseInt(value);
            switch(value){
                case 1:
                    color = 'red';
                    break;
                case 2:
                    color = 'blue';
                    break;
                case 3:
                    color = 'green';
                    break;
                case 4:
                    color = 'yellow';
                    break;
                case 5:
                    color = 'purple';
                    break;
            }
            $(this).css('background-color',color);
            updateResult();
        }

} else {
    alert('You must check radio button first');
}
});

function updateResult(){
    $('td').each(function(){
        if($(this).css('background-color') == 'red'){
            method1++;
        }
        if($(this).css('background-color') == 'blue'){
            method2++;
        }
        if($(this).css('background-color') == 'green'){
            method3++;
        }
        if($(this).css('background-color') == 'yellow'){
            method4++;
        }
        if($(this).css('background-color') == 'purple'){
            method5++;
        }
    });
    alert(method1); // Alert amount of red here.
}

谢谢。

Answer 1

在你的情况下：

var method1 = 0;
var method2 = 0;
var method3 = 0;
var method4 = 0;
var method5 = 0;
var clickedTeeth;

$('td').click(function(){
   if($('input[type=radio]').is(':checked')) {
        var clickingTeeth = $(this).attr('id');
        if(clickedTeeth == clickingTeeth) {

        } else {
            clickedTeeth = clickingTeeth;
            var color;
            var value = $("input:radio:checked").val();
            value = parseInt(value);
            switch(value){
                case 1:
                    color = 'red';
                    updateResult(++method1);
                    break;
                case 2:
                    color = 'blue';
                    updateResult(++method2);
                    break;
                case 3:
                    color = 'green';
                    updateResult(++method3);
                    break;
                case 4:
                    color = 'yellow';
                    updateResult(++method4);
                    break;
                case 5:
                    color = 'purple';
                    updateResult(++method5);
                    break;
            }
            $(this).css('background-color',color);
        }

  } else {
    alert('You must check radio button first');
  }
});

function updateResult(method){
 alert(method); // Alert amount of red here.
}

我如何知道具有特定背景颜色的元素数量？

1 个答案: