Question

我有多个复选框和标签，当答案正确时，我想更改所选复选框的背景颜色并标记 < / p>

<input type="checkbox" id="a" class="check-with-label" />
<label for="a" class="question_box">
    <?php echo $vraag[0]['A'] ?>
</label>

<input type="checkbox" id="b" class="check-with-label" />
<label for="b" class="question_box">
    <?php echo $vraag[0]['B'] ?>
</label>

当用户按下提交时，它会调用 ajax调用到脚本以检查它是否是正确的答案。

$('#bottom').on('click', function(){
    $('#antwoorden input:checked').each(function() {
        var selected = $(this).attr('id');
        //var selected_box = this;
        selected = selected.toUpperCase();

        var data = {
            vraag_nummer : <?php echo $vraag[0]['id'] ?>,
            antwoord     : selected
        };

        console.log(data);
        $.ajax({
            type: 'POST',
            url : 'includes/check_correct.php',
            data: data,
            success: function(data) {
                if(data.correct){
                    this.css('background-color', 'green');
                    //selected_box.css('background-color', 'green');
                } else {
                    this.css('background-color', 'red');
                }
            },
            error: function(err) {
                console.log('error');
                console.log(err);
            }
        });
    });
});

问题是我不知道如何来调用正确的框，因为当用户按 submit 时，this变量现在是提交按钮并且< em> not 复选框（在时间_中只能选择一个复选框。

所以问题是如何从

替换所选AND和正确框的背景颜色

.check-with-label:checked + .question_box {
    background-color: orange;
}

到

background-color:green

（以及错误的red）

Answer 1

尝试更改label而不是this

您已经获得了标签的ID

（var selected = $(this).attr('id');）

可能会返回a / b / c / d然后使用

$('label[for="'+selected+'"]').css('background-color', 'green'); //or red in the else statement

这会为所选ID的标签设置样式，在本例中为d 上面的代码基本上意味着：

$('label][for="d"].css('background-color','green'); //or red

然后使用所选变量

古德勒克！

Answer 2

成功使用selected_obj.css而不是this.selected并将$（this）传递给selected_obj

Category

Answer 3

试试这个

$('#bottom').on('click', function(){
    $('#antwoorden .check-with-label').each(function() {
        var selected = $(this).attr('id');
        var isChecked = $(this).is(':checked'));
        if (!isChecked) {
            return;
        }
        var selected_obj = $(this);
        //var selected_box = this;
        selected = selected.toUpperCase();

        var data = {
            vraag_nummer : <?php echo $vraag[0]['id'] ?>,
            antwoord     : selected
        };

        console.log(data);
        $.ajax({
            type: 'POST',
            url : 'includes/check_correct.php',
            data: data,
            success: function(data) {
                if(data.correct){
                    selected_obj.css('background-color', 'green');
                } else {
                    selected_obj.css('background-color', 'red');
                }
            },
            error: function(err) {
                console.log('error');
                console.log(err);
            }
        });
    });
});

Answer 4

页面呈现并显示给用户后，PHP将不再运行。因此，在$('#bottom').on('click'函数中，PHP代码将不起作用。诀窍是在构建页面时存储该信息，例如将其写入数据属性或其他类似物。

在AJAX成功函数中，$(this)对象不可用。将其设置为全局变量，您将能够访问该值。

/* javascript/jQuery */
$('#bottom').on('click', function(){
    $('#antwoorden input:checked').each(function() {
        var selected = this.id; //faster, same result
        $this = $(this);
        selected = selected.toUpperCase();

        var data = {
            //change next line - PHP finished running
            vraag_nummer : $this.attr('data-vn'),
            antwoord     : selected
        };

        console.log(data);
        $.ajax({
            type: 'POST',
            url : 'includes/check_correct.php',
            data: data,
            success: function(data) {
                if(data.correct){
                   $this.css('background-color', 'green');
                } else {
                   $this.css('background-color', 'red');
                }
            },
            error: function(err) {
                console.log('error');
                console.log(err);
            }
        });
    });
});

<!-- HTML: -->
<input id="vraag_nummer" data-vn="<?php echo $vraag[0]['id'] ?>" type="text" />

更改复选框+标签jquery

4 个答案: