javascript - 如何将不同的图像样式应用于主 html 页面上使用的相同图像并弹出模式

Question

更新

根据以下答案，我已将代码更改为看起来有效的代码，但我不确定它是否真的是最佳实践编码。

                $(document).ready(function () {
                    $('.go img').css('cursor', 'pointer');

                    $('.go').on('click', 'img', function (e) {
                    $('.go img').removeClass('BadgeImgOutline');    


                        // It was $this but its been changed to target the complete parent object to get all info into the modal box/////
                    $(this).parent().appendTo('#badgeselect');
                   $(this).addClass('BadgeImgOutlineSmall'); 
                   $('.go img').addClass('BadgeImgOutline'); 

我在下划线包装器中有一个图像，该包装器具有与之关联的 BadgeImgOutline 类。此类以 100% 的宽度和高度显示图像。这就是我想要的。

wrapper.append('<img class="images BadgeImgOutline" src="' + item.imageURL + '" />');

下面的代码然后获取包装器内的所有元素(包括图像)并将其添加到模态弹出框。

我不想在这里以 100% 的比例显示图像，而只想以 50% 的比例显示它，但仍在应用原始的 BadgeImgOutline css。如果我更改它，它会更改主 html 页面和弹出窗口。

我该如何解决这个问题？我可以在将图像添加到弹出窗口之前删除图像的 css 样式，还是在将其添加到弹出窗口之后添加另一个 css 样式？

                    $(document).ready(function () {
                        $('.go img').css('cursor', 'pointer');
                        $('.go').on('click', 'img', function (e) {
                            // It was $this but its been changed to target the complete parent object to get all info into the modal box/////
                        $(this).parent().appendTo('#badgeselect');




            $('#modal').reveal({

Answer 1

您可以通过某些方式覆盖宽度。我只想向这个特定元素添加一个辅助 class:

你可以重复使用这个位:

$('.go img').css('cursor', 'pointer');

并替换为:

$('.go img').addClass('popupImg');

在您的样式上，只需添加新规则(观察它应该在默认规则之后):

.go img.popupImg {
    cursor: pointer;
    width: 50%;
}