サムネイルをクリックすると画像が変わります

Question

サムネイルをクリックすると、画像をどのように変更できますか？サムネイルはbackground-imageと表示されるためです。

大きな画像を変更するにはサムネイルをクリックしてURLを取得するにはどうすればよいですか？

.ci-top { 
 
    clear: both; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.top-left { 
 
    float: left 
 
} 
 

 
.ci-bottom { 
 
    text-align: right; 
 
} 
 

 
.ci-thumb { 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
.ci-thumb-1 { 
 
    background-image: url(http://placeholder.pics/svg/300/FF2209); 
 
} 
 

 
.ci-thumb-2 { 
 
    background-image: url(http://placeholder.pics/svg/300/5BFF76); 
 
} 
 

 
.ci-thumb-3 { 
 
    background-image: url(http://placeholder.pics/svg/300/325BFF); 
 
}

<div class="ci-main"> 
 

 
    <div class="ci-top"> 
 
    <div class="top-left"><img id="change-img" src="http://placeholder.pics/svg/300/FF2209"></div> 
 
    <div class="top-right"> 
 
     <h1>test</h1> 
 
     <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></div> 
 
    </div> 
 

 

 
    <div class="ci-bottom"> 
 
    <div class="ci-thumb ci-thumb-1"></div> 
 
    <div class="ci-thumb ci-thumb-2"></div> 
 
    <div class="ci-thumb ci-thumb-3"></div> 
 
    </div> 
 
</div>

私はどこかをクリックしてURLを取得し、変更する方法を、知っているが、私は、背景画像のURLを取得して、大きな画像でそれを変更する方法がわかりません。ここで

<img id="change-img" .. > 

Answer 1

は、あなたの答えは、変数にbackground-imageを格納し、（URLを削除）し、画像SRC

$(".ci-thumb").on("click",function(){ 
 
    var bg = $(this).css('background-image'); 
 
bg = bg.replace('url(','').replace(')','').replace(/\"/gi, ""); 
 
$("#change-img").attr("src",bg); 
 
})

.ci-top { 
 
    clear: both; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.top-left{ 
 
float: left 
 
} 
 

 
.ci-bottom { 
 
    text-align: right; 
 
} 
 

 
.ci-thumb { 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
.ci-thumb-1 { 
 
    background-image: url(http://placeholder.pics/svg/300/FF2209); 
 
} 
 

 
.ci-thumb-2 { 
 
    background-image: url(http://placeholder.pics/svg/300/5BFF76); 
 
} 
 

 
.ci-thumb-3 { 
 
    background-image: url(http://placeholder.pics/svg/300/325BFF); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ci-main"> 
 

 
<div class="ci-top"> 
 
    <div class="top-left"><img id="change-img"src="http://placeholder.pics/svg/300/FF2209"></div> 
 
    <div class="top-right"><h1>test</h1> 
 
     <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></div> 
 
</div> 
 

 

 
    \t <div class="ci-bottom"> 
 
    \t \t <div class="ci-thumb ci-thumb-1"></div> 
 
     <div class="ci-thumb ci-thumb-2"></div> 
 
     <div class="ci-thumb ci-thumb-3"></div> 
 
    \t </div> 
 
    </div>