javascript - 当选择红色时，Jquery 下拉列表都会变成绿色

Question

您好，当我在下拉列表中选择红色时，当我单击td时，我仍然得到backgroundcolor green，有人可以帮忙吗？

$('document').ready(function (){
    if ($('#rood').val() == 'Rood'){
        $('td').click(function (){
            $(this).css('background-color', 'red');
        });
    }

    if ($('#groen').val() == 'Groen'){
        $('td').click(function (){
            $(this).css('background-color', 'green');
        })
    }
});

<h2>Color</h2>
<select>
    <option value="Rood" id="rood">Rood</option>
    <option value="Groen" id="groen">Groen</option>
    <option value="Blauw">Blauw</option>
    <option value="Geel">Geel</option>
</select>

Answer 1

您应该验证点击处理程序中的条件。

$(document).ready(function() {
    //Bind the click hanlder
    $('td').click(function() {
        //Fetch the value for select
        var value = $('select').val();

        //Fetch the value and compare          
        if (value == 'Rood') {
            $(this).css('background-color', 'red');
        } else if (value == 'Groen') {
            $(this).css('background-color', 'green');
        }
    })
});