Question

我想通过为每个问题选择一个选项来让我的网站用户回答问题。如果他们选择了正确答案，他们给出正确答案的段落变为绿色，他们可以继续通过相同的程序回答以下问题，而无需重新加载当前页面。

这适用于＆＃34; onClick＆＃34;事件，但如果选择了正确的答案，然后由其他东西替换，则DIV会保留相同的新添加的类。这就是为什么我想使用onSelect，这在这里不起作用......

有人能帮帮我吗？谢谢

<script language="javascript">

    function change_class1() {
        var p_l1 = document.getElementById("p_langue1");
        p_1.className = "point_langue";
    }

    function change_class2() {
        var p_l2 = document.getElementById("p_langue2");
        p_2.className = "point_langue";
    }

    function change_class3() {
        var p_l3 = document.getElementById("p_langue3");
        p_3.className = "point_langue";
    }

</script>>

<h3>QUESTIONS & ANSWERS</h3>

<div id="p_langue1">
    <p>Question 1</p>
    <select>
        <option>A</option>
        <option onselect="change_class1()">B</option>
    </select>
</div>

<div id="p_langue2">
    <p>Question 2</p>
    <select>
        <option onselect="change_class2()">A</option>
        <option>B</option>
    </select>
</div>

<div id="p_langue3">
    <p>Question 3</p>
    <select>
        <option onselect="change_class3()">A</option>
        <option>B</option>
    </select>
</div>

Answer 1

在Javascript中 - Demo

 <h3>QUESTIONS & ANSWERS</h3>

<div id="p_langue1">
    <p>Question 1</p>
    <select onchange="change_class('p_langue1',this.value)">
        <option>A</option>
        <option>B</option>
    </select>
</div>
<div id="p_langue2">
    <p>Question 2</p>
    <select onchange="change_class('p_langue2',this.value)">
        <option>A</option>
        <option>B</option>
    </select>
</div>
<div id="p_langue3">
    <p>Question 3</p>
    <select onchange="change_class('p_langue3',this.value)">
        <option>A</option>
        <option>B</option>
    </select>
</div>

 function change_class(selectedId, answer) {
     var selectedValue = document.getElementById(selectedId);
     if (answer == 'A') {
         selectedValue.className = "point_langue";
     } else {
         selectedValue.className = "";
     }
 }

.point_langue {
    color :green;
}

Answer 2

如果你可以使用jQuery，你可以更容易地为每个选择字段处理onchange事件，如下所示，

$('#p_langue1').on('change', function() {
    var selectedOption = $(this).val();
    if(selectedOption === 'B') {
        $('#p_langue1').addClass('point_langue');
    } else {
        $('#p_langue1').removeClass('point_langue');
    }
});

否则你可以设置＆＃39; onchange＆＃39; select和javascript中的事件，

function onSelectChange() {
    var selectedOption = document.getElementById("p_langue1").value;
    if(selectedOption === 'B') {
        document.getElementById("p_langue1").setAttribute('class','point_langue');
    } else {
        document.getElementById("p_langue1").removeAttribute('class','');
    }
}

使用表单（选择选项）和JavaScript更改多个DIV类

2 个答案: