javascript - Regarding the radio button problem, I am a novice, I hope someone can help me.

Question

The company wants to create an event page with 4 buttons. When the button is clicked, it is equivalent to the selected state and the background image is changed.

How to restore the previous one to its original state when clicking the next one.

Answer 1

The button image is written into the background-image, and the selected one is added with class to cover the image

Answer 2

This editing tool, I guess it may be dw. . . Then this code also reveals a fresh breath.
First of all, let me tell you that writing switching is not how you write it. Only a small number of demon cultivators can write this way, and it is informal. We cultivators generally achieve our goals by modifying classes.
Simpler way of writing:

<p class="item">
    <img src="unchoose.png" class="unchoImg" >
    <img src="choose.png" class="choImg">
</p>

<style>
.choImg{
    display : none;
}

.choose .unchoImg{
    display : none;
}

.choose .choImg{
    display : block;
}
</style>

At this time, we can achieve the corresponding purpose by operating the "choose" class name through js.

Answer 3

First of all, your IMG doesn’t have an ID. Why are you writing this ID here? If you want to use ID control, add the ID first...
Then you can make two button styles, one selected and one unselected. Then use js to control when a button is clicked to add the selected style to the button's CSS, and then clear the selected styles of other buttons.

Answer 4

css:

.btn {
    background-image:url(default);
}

.btn.sel {
    background-image:url(sel.png);
}

javascript:

//step1 清除所有含有sel按钮的sel样式 $('.btn.sel').removeClass('sel');
//step2 给当前触发事件的btn增加sel样式 $(this).addClass('sel')