在html中单击其中一个时，交换yes和no图像。

Question

我有两个图像是和否，当单击时会改变颜色，它们会突出显示。当单击yes_unselect时，它需要更改为yes_select，并将no的id更改为no_unselect。我面临着两个问题。

当单击一次图像时，图像将更改为yes_select，但再次单击该图像时，不会更改回yes_unselect.

1. When。更改为yes_select I want id="no“，no_select to更改为no_unselect.

<div id="yes">
<input type="image" src="images/yes_unselect.jpg" id="yes" onClick="if (this.src='images/yes_unselect.jpg') {this.src='images/yes_unselect.jpg';} else {if (this.src='images/yes_select.jpg') {this.src='images/yes_unselect.jpg';}}">
</div>

<div id="no">
<input type="image" src="images/no_select.jpg" id="no" onClick="if (this.src='images/no_select.jpg') {this.src='images/no_unselect.jpg';} else {if (this.src='images/no_select.jpg') {this.src='images/no_unselect.jpg';}}">
</div>

Answer 1

在头上这样做怎么样：

var theAnswer = undefined; //Global variable for access later.
function changeAnswer(yes) {
    theAnswer = yes;
    //Yes should be a boolean, therefore true==yes, false==no
    var eYes = document.getElementById('yes'),
        eNo = document.getElementById('no');
    eYes.src = ( yes ) ? 'images/yes_select.jpg' : 'images/yes_unselect.jpg';
    eNo.src = ( yes ) ? 'images/no_unselect.jpg' : 'images/no_select.jpg';
}

当然，您必须更改id%s中的冲突。多个元素不能具有相同的id，因此请将<div>的id%s更改为类似yesDiv和noDiv的内容。

然后，对于yes按钮，图像的onclick可以是changeAnswer(true);，对于no按钮，可以是changeAnswer(false);。在脚本中的任何位置都可以访问theAnswer，并将反映用户的当前选择。

Answer 2

如下所示：

<script type="text/javascript">

function swap() {
    var e_yes = document.getElementById("yes");
    var e_no = document.getElementById("no");
    var yes_unselect = 'images/yes_unselect.jpg';
    var yes_select = 'images/yes_select.jpg';
    var no_unselect = 'images/no_unselect.jpg';
    var no_select = 'images/no_select.jpg';

    var result = e_yes.src == yes_unselect;


    e_yes.src = result ? yes_select : yes_unselect;
    e_no.src = result ? no_unselect : no_select;
}


</script>

<div id="div_yes">
    <input type="image" src="images/yes_unselect.jpg" id="yes" onclick="swap()">
</div>
<div id="div_no">
    <input type="image" src="images/no_select.jpg" id="no" onclick="swap()">
</div>