在改变图像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>