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

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

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();
                }
            });
        }

---

如果要替换为背景图像，请创建两个类

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

---

最初仅向元素添加

。默认图像

类，选择图像时，单击事件并添加

。更改图像

类<代码>。更改图像类属性将覆盖您的

。默认图像

属性图像。

避免使用

！重要信息

，请尽可能。这是一个bandaid，不是一个解决方案。你有没有想过在同一个元素中重写现有的css属性，而不使用！重要信息。您应该使用

的唯一原因！重要信息

是如果您正在覆盖某些您无法控制且无法更改的代码。但如果你能改变它，那么你应该改变。删除内联样式并使用专用性和伪类选择器。如果选择所需的确切状态并根据需要应用样式，代码将更易于管理。此外，您的答案（似乎是在SASS中）表明，显示更改的图像时，元素将同时具有两个类，这将使第二个背景图像更加具体，并将在不使用

的情况下覆盖第一个值！重要信息

。能否提供一个可运行的代码示例？使用JSFIDLE或代码段。看起来，每当状态更改（选中或取消选中）时，您都在设置背景，并且始终设置为同一图像。我认为您只需要创建一个简单的CSS类，设置背景，并在选中单选按钮时选择on

input[name='baggage']：选中~img{background image:url（…）}

为什么要设置

img

标记的

background image

属性？您不想使用

div

或更改

src

属性吗？

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