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，你可以使用它！

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

改变图像的src时改变除法的背景图像

2 个答案: