我在选择之前有一个图像，当我选择它时应该将其更改为另一个图像答案

【问题标题】：I have one image before it is selected, when I choose it should be changed to another image我在选择之前有一个图像，当我选择它时应该将其更改为另一个图像
【发布时间】：2019-07-30 15:48:47
【问题描述】：

当我选择图像时，我有一个单选按钮和一个图像，我应该用另一个图像替换它

function getAirlinesById(idAirlines) {
            $.ajax({
                dataType: 'json',
                type: "POST",
                url: '{{route('get-baggage-airlines')}}',
                data:"airlines_id="+idAirlines,
                success: function(response){
                    console.log(response);
                    $("#baggageAirline").empty();
                    for(let i=0;i<response.length;i++){
                        let category = response[i].baggage.category;
                        switch(category) {
                            case 1:
                            category = "KG";
                            break;
                            case 2:
                            category = "PCS";
                            break;
                        };

                        $("#baggageAirline").append('<div class="col-3 list-baggage"><input type="radio" class="input-radio-costum" required onclick="getPrice('+response[i].price_in_SGD+')" onchange="changeBackground('+response[i].baggage.config_baggage_id+')" name="baggage" value="'+response[i].baggage.max_range+' '+category+'"><img src="{{asset("assets/image/baggage.png")}}" class="image-default" id="image-selected'+response[i].baggage.config_baggage_id+'"><p class="baggage-amount">'+response[i].baggage.max_range+' '+category+'</p><p class="text-center tcc">'+response[i].currency_symbol+' '+response[i].price_in_SGD+'</p></input></div>');

                    }
                },
                error: function(xhr, status, error) {
                    alert('ERR_CONNECTION_TIMED_OUT');
                    location.reload();
                }
            });
        }

我已经这样尝试过了，但是我选择的图像仍然存在并且都被选中，应该只选择一个，因为它使用单选按钮

function changeBackground(idBaggage){
        $('#image-selected'+idBaggage).css({
            'background-image' : "url('assets/image/baggageblack.png')",
            'margin-top' : '-30px',
        });
    }

【问题讨论】：

您能提供一个可运行的代码示例吗？使用 jsfiddle 或 sn-p。每当状态更改（选中或未选中）时，您似乎都在设置背景，并且始终设置为相同的图像。我认为您只想制作一个带有背景集的简单 CSS 类，并在选中单选按钮时选择 on。 input[name='baggage']:checked ~ img { background-image: url(...) }
为什么还要设置img 标签的background-image 属性？您不想使用div 或更改src 属性吗？

标签： jquery css ajax

【解决方案1】：

如果要替换为背景图片，则创建两个类

.default-image {
  background-image: url('/path');
  .change-image {
    background-image: url('/path') !important;
   }
}

最初只给元素添加.default-image类，当你选择图片时，做onclick事件并添加.change-image类。 .change-image 类属性将覆盖您的 .default-image 属性图像。

【讨论】：

尽可能避免使用!important。这是创可贴，不是解决方案。
你有什么想法可以覆盖同一个元素中现有的css属性，而不用！important。
您应该使用!important 的唯一原因是，如果您要覆盖一些您无法控制且无法更改的代码。但如果你可以改变它，那么你应该。删除内联样式并使用特异性和伪类选择器对您有利。如果您选择您想要的确切状态并根据需要应用您的样式，代码将变得更易于管理。
另外，您的回答（似乎在 SASS 中）表明，在显示更改后的图像时，元素将同时具有两个类，这将使第二个背景图像更具体，并且会覆盖第一个值而不!important.