Javascript 基于图像选择更改背景图像CSS属性

我正在做一些我以前从未做过的事情，我想看看是否有人知道现有的JSJFIDLE或者我可以研究/回顾的东西，以了解如何完成这项工作

下图附件显示了我正在尝试创建的内容。我已经准备好了HTML/CSS，如下所示：

<div class="container-fluid featured-artist">
  <div class="col-lg-3 artist-bio pull-right">
    <h4>JOHN DOE</h4>
    <h6><em>Artist Bio</em></h6>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="artist-link text-right"><em><a href="#">View all work from this artist</a></em></p>
    <div class="row">
      <div class="col-lg-4 artist-photo"> <img src="../html/img/ER 1 (original).png" class="img-responsive" /></div>
      <div class="col-lg-4 artist-photo"> <img src="../html/img/ER 1 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="../html/img/CG 7 (original).png" class="img-responsive" /> </div>
    </div>
    <div class="row">
      <div class="col-lg-4 artist-photo"> <img src="../html/img/ER 4 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="../html/img/ER 2 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="../html/img/other artists_F.png" class="img-responsive" /> </div>
    </div>
  </div>
</div>

无名氏
艺术家传记

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

现在，大图像是特色艺术家类的背景属性，我的目标是，如果右侧的6幅图像中的任何一幅被选中，则更改该属性。因此，如果选择了一个图像，它将更改“特色艺术家”css类的背景图像

如果有我可以学习的JSFIDLE或教程，请发送我的方式

$（文档）.ready（函数（）{
$（'img'）。单击（函数（）{
var src=$（this.attr（'src'）；
if（src=='../html/img/er4（original.png'））{
$（'featured artist'）.css（'background-color'，'red'）；
}else if（src=='../html/img/ER 2（original.png'））{
$（'featured artist'）.css（'background-color'，'black'）；
}
//等等
});
});

这应该可以：-

jQuery

$('.artist-bio img').on('click',function(){
    var imgSrc = $(this).attr('src');
    $('.featured-artist').css('background-image','url('+imgSrc+')');
});

$('.artist-bio img').on('click',function(){
    var imgSrc = $(this).data('src');
    $('.featured-artist').css('background-image','url('+imgSrc+')');
});

如果对缩略图和背景使用单独的图像，则可以将大图像路径设置为

img

元素上的数据属性，然后使用该属性而不是其

src

属性。像这样：-

HTML

<img data-src="path/to/large/img" src="path/to/thumbnail" alt="" />

---

我正在使用您提供的代码，但似乎无法使其正常工作。在通过HTML调用图像之前，将目标锁定在artist bio类而不是我拥有的artist photo类是正确的吗？抱歉，我不知道如何编辑评论。。。另外，我对javascript/jquery还相当陌生，但我的样式表是外部的，这会导致问题吗？还是一旦呈现页面，js可以访问所有CSS？不完全确定。谢谢你的帮助@MichaelJFroseth两者都应该工作，因为您的

img

元素是这两个类的后代。尝试使用

artist photo img

，如果您想测试它，可以直接使用

img

。是的，如果样式表和脚本加载到页面中，jQuery可以访问所有DOM元素和CSS类。谢谢。不管出于什么原因，我似乎无法让它发挥作用。你认为我必须有完整的图像路径吗？我不这么认为，但我只是想自己解决这个问题。如果你想查看它，如果有任何帮助，我正在开发的HTML文件可以在这里找到，以供参考@MichaelJFroseth，我看到了你的页面。您在

中调用脚本，而jQuery是在主体的底部定义的。您需要在包含jQuery之后放置脚本。

$('.artist-bio img').on('click',function(){
    var imgSrc = $(this).data('src');
    $('.featured-artist').css('background-image','url('+imgSrc+')');
});