Question

我正在研究以前没有做过的事情，想知道是否有人知道现有的jsjfiddle或者我可以研究/审查的东西，以了解如何实现这一目标。

下面的图片附件显示了我要创建的内容。我有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类的背景图像。

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

Click To See What I am trying to create

Answer 1

这应该有效： -

<强>的jQuery

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

如果您使用单独的图像作为缩略图和背景，则可以将大图像路径设置为img元素上的数据属性，然后使用该图像而不是src属性。像这样： -

<强> HTML

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

<强>的jQuery

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

Answer 2

<script>
$(document).ready(function(){
    $('img').click(function(){
        var src = $(this).attr('src');
        if(src == '../html/img/ER 4 (original).png'){
            $('.featured-artist').css('background-color','red');
        }else if(src == '../html/img/ER 2 (original).png'){
            $('.featured-artist').css('background-color','black');
        }
        // and so on
    });
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

2 个答案: