点击 jquery/css 替换单个图像答案

【问题标题】：Replacing single image on click jquery/css点击 jquery/css 替换单个图像
【发布时间】：2020-04-20 23:09:32
【问题描述】：

我正在做一个项目，但遇到了一个 CSS 问题。我有一个调查，一旦用户点击某个选项，灰色图像就会改变以补充正确的选择。

我有它的工作，但是，图像在一个名为 img-element 的类中

因此，一旦单击图像，它就会更改页面上具有此类的所有图像，而不仅仅是一个选定的调查问题。

我试图通过为每个问题添加一个类来解决这个问题.question1, .question2：

survey.scss

           .questionnaire {
                    margin-top: 70px;
                    .question1 {
                        .box-title-with-image {
                            .img-element {
                                left: 95%;
                                top: -100%;
                                bottom: auto;
                            }
                        }
                    }
                    .question2 {
                        .box-title-with-image {
                            .img-element {
                                left: 95%;
                                top: -100%;
                                bottom: auto;
                            }
                        }
                    }
                }

在 jquery 中，我添加了多个类，如下所示：https://www.w3schools.com/jquery/sel_multiple_classes.asp 并在我的 .js 文件中实现它

survey.js

        if (question1Answers.answer1) { // if user select answer1 of question1, then
            $('.question1, .img-element').attr('src','../images/img1.png');

                             // ...omitted code ...
  
        } else if (question1Answers.answer2 && question2Answers.answer2) {
            $('.question2, .img-element').attr('src','../images/img2.png');

}

但是，它仍然有同样的问题。我知道这可以用 css 中的伪类来完成，但我不能在这个项目中使用它。有没有使用 jquery 的另一种方法？

【问题讨论】：

您正在将问题 ID 或密钥与类耦合。这是一个非常糟糕的做法。想象一下你有 20 个问题......你必须声明 20 个类......你必须为每个问题有一个 id 或一个属性，如“id”或“data-question-number”，这个 id 必须出现在特定的 div 上，或者img 或按钮... 在您的 onclick 方法中，您必须检索问题的 id 或键（在按钮或此按钮的父 div 中搜索）。然后搜索要激活的img，如：$('img[data-question-number='99']).attr(....)

标签： javascript jquery sass

【解决方案1】：

如果您尝试将 src 属性添加到类“img-element”的 img 元素，该元素位于“question1 或 question2”类的元素内，那么您的选择器应该像

这个：

$('.question1 .img-element').attr('src','../images/img1.png');

不是这个：

$('.question1, .img-element').attr('src','../images/img1.png');

使用逗号将选择所有具有这些类的元素。

【讨论】：