javascript - Concernant le problème du bouton radio, je suis novice, j'espère que quelqu'un pourra m'aider.

Question

L'entreprise souhaite créer une page d'événement avec 4 boutons Lorsque le bouton est cliqué, cela équivaut à l'état sélectionné et l'image de fond est modifiée.

Comment restaurer le précédent à son état d'origine en cliquant sur le suivant.

Answer 1

L'image du bouton est écrite dans l'image d'arrière-plan et celle sélectionnée est ajoutée avec classe pour couvrir l'image

Answer 2

Cet outil d'édition, je suppose que c'est peut-être dw. . . Alors ce code révèle aussi un souffle frais.
Tout d'abord, laissez-moi vous dire qu'écrire un changement n'est pas la façon dont vous l'écrivez. Seul un petit nombre de cultivateurs de démons peuvent écrire de cette façon, et c'est informel. Nous, les pratiquants, atteignons généralement nos objectifs en modifiant les classes.
Manière d'écrire plus simple :

<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>

À l'heure actuelle, nous pouvons atteindre l'objectif correspondant en exécutant le nom de classe "choisir" via js.

Answer 3

Tout d'abord, votre IMG n'a pas d'ID. Pourquoi écrivez-vous cet ID ici ? Si vous souhaitez utiliser le contrôle d'ID, ajoutez d'abord l'ID...
Ensuite, vous pouvez styliser deux boutons, un sélectionné et un non sélectionné. . Utilisez ensuite js pour contrôler le moment où l'on clique sur un bouton afin d'ajouter le style sélectionné au CSS du bouton, puis effacez les styles sélectionnés des autres boutons.

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')