jQuery单击更改背景图像URL功能

Question

当选择选定的颜色时，我想在父行中更改背景图片的网址。单击第一个列的粉红色时，第一个列的背景图像将变为粉红色，而第二个列单击白色，则第二个列将变为白色而不会影响第一个列。

jQuery(document).ready(function ($) {
  
$(".selector a").change(function(){
    if ('.image-black').hasClass('selected'){
     $(".image").css("background-image", "url(https://cottontee.co/wp-content/uploads/2018/10/black.jpg)");
} else {
     if ('.image-white').hasClass('selected'){
			$(".image").css("background-image", "url(https://cottontee.co/wp-content/uploads/2018/10/white.jpg)");
     } else {
          if ('.image--pink').hasClass('selected'){
          $(".image").css("background-image", "url(https://cottontee.co/wp-content/uploads/2018/10/pink.jpg)");
          }
     }
}
});
  
});

.image {
  width: 500px;
  height: 500px;
  background-size: cover;
}

<div class="row">
  <div class="col">
    <div class="image" style="background-image: url(https://cottontee.co/wp-content/uploads/2018/10/white.jpg);"></div>
    <div class="selector">
      <a href="#" class="image-black selected">Black</a>
      <a href="#" class="image-white">White</a>
      <a href="#" class="image-pink">Pink</a>
    </div>
  </div>
  <div class="col">
    <div class="image" style="background-image: url(https://cottontee.co/wp-content/uploads/2018/10/white.jpg);"></div>
    <div class="selector">
      <a href="#" class="image-black selected">Black</a>
      <a href="#" class="image-white">White</a>
      <a href="#" class="image-pink">Pink</a>
    </div>
  </div>
</div>

https://jsfiddle.net/1so3mwbr/

Answer 1

请尝试以下代码

jQuery(document).ready(function ($) {

$(".selector a").click(function(){
        $(".selector a").removeClass('selected');
        $(this).addClass('selected');
         var className = $(this).attr('class').split('-')[1].split(' ')[0];

        $(".image").css("background-image", "url(https://cottontee.co/wp-content/uploads/2018/10/"+className+".jpg)");

});

});