Изменение фонового изображения деления при изменении src изображения

Question

У меня есть стиль, указанный в главе моего документа. Я указываю фоновое изображение в разделе, но позже нужно изменить его, если пользователь нажимает на ссылку, но все, что я пытался сделать, отказывается работать.

<style type="text/css"> 
      /*Some CSS*/ 
      .large { 
       background: url('/images/artwork1.jpg') no-repeat; 
} 
</style> 

<div class="large"></div> 
<img id="main_image" alt="Image"/> 
<img onclick="javascript:document.getElementById('main_image').sr‌​c='/images/artwork2.‌​jpg'; $('.large').css({'background-image':'url(/images/artwork2.jp‌​g)';" alt="Change Image"/> 

Я попытался сделать фоновое изображение не в стиле, но щелчок по ссылке не изменил его. Я пробовал JavaScript и jQuery. Я смог изменить изображение, пока не добавил в jQuery.

Answer 1

Да, это потому, что у вас есть ошибка в вашем синтаксисе.

Попробуйте это.

javascript:document.getElementById('main_image').sr‌​c='/images/artwork2.‌​jpg'; $('.large').css('background-image', 'url(/images/artwork2.jp‌​g)');

Answer 2

Кроме вас есть некоторые проблемы синтаксиса, вы должны действительно инкапсулировать ваши JS в функции, а не положить все в атрибуте onclick события! Или используйте только jQuery для регистрации слушателя.

Говоря о jQuery: Почему вы смешиваете простой JS с селекторами jQuery? Если у вас уже есть jQuery, вы можете использовать его!

function myFunction() { 
 
    $("#main_image").attr("src", "https://dummyimage.com/150x100/ff0000/fff"); 
 
    $(".large").css("background-image", "url(https://dummyimage.com/150x100/ff0000/fff)"); 
 
};

div, img { 
 
    width: 150px; 
 
    height: 100px; 
 
    margin-bottom: 10px; 
 
} 
 
.large { 
 
    background: url('https://dummyimage.com/150x100/000000/fff') no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="large"></div> 
 
<img id="main_image" alt="Image" /> 
 
<button onclick="myFunction()">change image</button>