时间戳

首页 > 解决方案 > 点击 jquery/css 替换单个图像

javascript - 点击 jquery/css 替换单个图像

问题描述

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

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

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

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

调查.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 文件中实现了它

调查.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 的方法来解决这个问题？

标签： javascriptjquerysass

解决方案

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

这个：

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

而不是这个：

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

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

推荐阅读