Javascriptで複数回背景画像を変更する

Question

3つの画像をクリックしてみるだけです。ここで

は私のコードです：

<script type="text/javascript"> 
function toggleImages(obj) { 
if(obj.style.backgroundImage == "url('images/none.jpg')") { 
    obj.style.backgroundImage = "url('images/iPhoneImage-300x300.jpg')"; 
} 
else if(obj.style.backgroundImage == "url('images/iPhoneImage-300x300.jpg')"){ 
    obj.style.backgroundImage = "url('images/smartphoneImage-300x300.jpg')"; 
} 
else if(obj.style.backgroundImage == "url('images/smartphoneImage-300x300.jpg')"){ 
obj.style.backgroundColor = "url('images/none.jpg')"; 
} 
} 

</script> 

<div onclick="toggleImages(this);" id="arrow1" style="background-image:url(images/none.jpg); display:block; width:300px; height:300px"></div> 

私は画像ではなく、私はそれがURLに関係していると思わせる背景画像なしで背景色を変更する場合、それは動作します。二重引用符で助けを

おかげ

Answer 1

マイJavaScriptコンソールプリントURL（「画像/ none.jpg」）を、あなたは、単一でチェックしている、あなたはそれをチェックするために他のものを使用する必要があります。

function toggleImages(obj) { 
    var tmp=obj.style.backgroundImage.replace(/url\(('|")/,'').replace(/('|")\)/,'') 
    if(tmp == "images/none.jpg") { 
     obj.style.backgroundImage = "url('images/iPhoneImage-300x300.jpg')"; 
    }else if(tmp == "images/iPhoneImage-300x300.jpg"){ 
     obj.style.backgroundImage = "url('images/smartphoneImage-300x300.jpg')"; 
    }else if(tmp == "images/smartphoneImage-300x300.jpg"){ 
     obj.style.backgroundImage = "url('images/none.jpg')"; 
    } 
    console.log(tmp); 
} 

Answer 2

一重引用符と二重引用符を入れ替えることができます（それほどスマートではありません）。
また、コードにはobj.style.backgroundImageであるobj.style.backgroundColorが1つあります。

<script type="text/javascript"> 
function toggleImages(obj) { 
if(obj.style.backgroundImage == 'url("images/none.jpg")') { 
    obj.style.backgroundImage = 'url("images/iPhoneImage-300x300.jpg")'; 
} 
else if(obj.style.backgroundImage == 'url("images/iPhoneImage-300x300.jpg")'){ 
    obj.style.backgroundImage = 'url("images/smartphoneImage-300x300.jpg")'; 
} 
else if(obj.style.backgroundImage == 'url("images/smartphoneImage-300x300.jpg")'){ 
obj.style.backgroundImage = 'url("images/none.jpg")'; 
} 
} 

</script> 

<div onclick="toggleImages(this);" id="arrow1" style="background-image:url(images/none.jpg); display:block; width:300px; height:300px"></div>