画像の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

あなたには、いくつかの構文の問題を抱えているほかに、あなたは本当にonclickイベント属性にすべてをかける機能であなたのJSをカプセル化し、そしてべきではありません！または、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>