Question

我有两张图片是和否，点击后会改变颜色，会突出显示。单击yes_unselect时，需要更改为yes_select并将no的id更改为no_unselect。我面临两个问题 1.单击yes_unselect后，yes_unselect将更改为yes_select，但再次单击该选项不会更改回yes_unselect。
2.当yes_unselect更改为yes_select时，我想要id =“no”图像，no_select更改为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中的冲突。多个元素不得具有相同的id，因此请将<div> s id更改为yesDiv和noDiv。

然后，对于“是”按钮，图片的onclick可以是changeAnswer(true);，对于“否”按钮，图片的changeAnswer(false);可以是theAnswer。可以访问脚本{{1}}中的任何位置，并反映用户当前的选择。

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>

在html中单击时，交换是和没有图像

2 个答案: