Question

我正在尝试根据所选选项更改背景颜色。在他们选择所需的选项之后没有任何反应这是我的代码;

Html代码;

<select id="importance" onchange="this.className=this.options[this.selectedIndex].className" class="low">
    <option class="low" value="low">Low</option>
    <option class="medium" value="medium">Medium</option>
    <option class="high" value="high">High</option>
    <option class="urgentap" value="urgent">Urgent</option>
    </select>

Jquery的;

   var projectCreate = $('#createP').on('click', function(){

    var name = $('.project-form input#name').val(),
        date = $('.project-form input#date').val(),
        time = $('.project-form input#time').val(),
        description = $('.project-form textarea#description').val(),

      importance = $('.project-form select#importance option:selected').val();
        if(importance == "Low")
$(".item").css('background','lightblue');
else if ($('#importance option:selected').text() == "Medium")
$(".item").css('background','yellow');
else if ($('#importance option:selected').text() == "High")
$(".item").css('background','orange');
else if ($('#importance option:selected').text() == "Urgent")
$(".item").css('background','red');
else
alert('test');

        $.ajax({
            url: 'xhr/new_project.php',
            data: {
                projectName: name,
                projectDescription: description,
                dueDate: date,
                time: time,
                status: importance
            },
            type: 'post',
            dataType: 'json',
            success: function(response){
                if(response.error){

                    $( ".error" ).empty(),
                    $( ".error" ).fadeIn(),
                    $(".error").append('<h2 class="error-text">' + response.error + '</h2>').fadeIn(),
                    $( ".error" ).delay(1500),
                    $( ".error" ).fadeOut();


                }else{
                    loadApp();
                }
            }
        });
        return false;
});

我做错了什么？提前谢谢！

Answer 1

这里有很多额外的疯狂可能对你的事业没有帮助。

让我们从检测到您选择框的更改事件开始。首先，我们需要不显眼的代码，因此请从元素中删除JavaScript：

<select id="importance" class="low">
    <option class="low" value="low">Low</option>
    <option class="medium" value="medium">Medium</option>
    <option class="high" value="high">High</option>
    <option class="urgentap" value="urgent">Urgent</option>
</select>

然后您的jQuery代码可以执行此操作：

$( "#importance" ).change(function() {
    var importance = $('option:selected', $(this)).val();
});

接下来，我建议将您的背景颜色包含在CSS类中，这样您就不需要单独使用哪种颜色。所以创建一些这样的类：

.importance-low { background-color: lightblue; }
.importance-medium { background-color: yellow; }
.importance-high { background-color: orange; }
.importance-urgent { background-color: red; }

从那里，您可以将您的课程应用于任何元素，作为上述.change()函数的一部分：

$('.item').removeClass('importance-low importance-medium importance-high importance-urgent').addClass('importance-' + importance);

清除项目中之前选择的任何类别/值，并添加新选择的类别。

更改所选选项上的css元素

1 个答案: