點擊項目可以更改另一個背景圖片

Question

嘗試使用javascript創建一個使用懸停在li項目上的排序的「按鈕」，這將改變另一個li項目（phoneChange）的背景。這些項目圍繞手機的圖像，當我將鼠標懸停在相關的鋰項目上時，我會更改屏幕截圖。我一直在尋找一個類似的例子，一直沒有找到任何適合我的東西。

<ol class="list-b"> 
<li class="firstPhone"><span class="title">First Box</span> Lorem ipsum sit dolor.</li> 
<li class="secondPhone"><span class="title">Second Box</span> Lorem ipsum sit dolor.</li> 
<li class="thirdPhone"><span class="title">Third Box</span> Lorem ipsum sit dolor.</li> 
<li class="fourthPhone"><span class="title">Fourth Box</span> Lorem ipsum sit dolor.</li> 
<li class="fifthPhone"><span class="title">Fifth Box</span> Lorem ipsum sit dolor.</li> 
<li class="sixthPhone"><span class="title">Sixth Box</span> Lorem ipsum sit dolor.</li> 
<li id="phoneChange" class="firstPhone"></li> 
</ol> 

CSS

.firstPhone{ 
background: url(../images/mobile1.png) } 
.secondPhone{ 
background: url(../images/mobile2.png) } 
.thirdPhone{ 
background: url(../images/mobile3.png)} 
.fourthPhone{ 
background: url(../images/mobile4.png)} 
.fifthPhone{ 
background: url(../images/mobile5.png)} 
.sixthPhone{ 
background: url(../images/mobile6.png)} 

Answer 1

添加一些識別class到每個 「按鈕」（I稱之爲爲簡單起見按鈕）：

<ol class="list-b"> 
    <li class="button firstPhone"><span class="title">First Box</span> Lorem ipsum sit dolor.</li> 
    <li class="button secondPhone"><span class="title">Second Box</span> Lorem ipsum sit dolor.</li> 
    <li class="button thirdPhone"><span class="title">Third Box</span> Lorem ipsum sit dolor.</li> 
    <li class="button fourthPhone"><span class="title">Fourth Box</span> Lorem ipsum sit dolor.</li> 
    <li class="button fifthPhone"><span class="title">Fifth Box</span> Lorem ipsum sit dolor.</li> 
    <li class="button sixthPhone"><span class="title">Sixth Box</span> Lorem ipsum sit dolor.</li> 
    <li id="phoneChange"></li> 
</ol> 

附加的事件處理程序，以這些元素：

var buttons = document.getElementsByClassName('button'); 

for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener('click', function() { 
    document.getElementById('phoneChange').css.background = this.css.background; 
    }); 
} 

Answer 2

純CSS解決方案臥底單選按鈕：

html { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: honeydew; 
 
} 
 

 
input { 
 
display: none; 
 
} 
 

 
.item { 
 
    cursor: pointer; 
 
    user-select: none; 
 
    -webkit-user-select: none; 
 
} 
 

 
#target { 
 
    position: absolute; 
 
    display: inline-block; 
 
    height: 176px; 
 
    width: 300px; 
 
    border: 2px solid crimson; 
 
    left: calc(50% - 150px); 
 
    top: 10px; 
 
} 
 

 
#click:checked ~ #target { 
 
    background: url('http://i.imgur.com/3jxqrKP.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 

 
#click2:checked ~ #target { 
 
    background: url('http://i.imgur.com/23lydbM.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
}

<input type="radio" id="click" name="click" value="click" /> 
 
<input type="radio" id="click2" name="click" value="click2" /> 
 

 
<label for="click"> 
 
<li class="firstPhone item">click A</li> 
 
</label> 
 

 
<label for="click2"> 
 
<li class="secondPhone item">click B</li> 
 
</label> 
 

 
<div id=target></div>

Answer 3

你可以試試這個：

<ol id="phoneList" class="list-b"> 
    <li onmouseover="phoneChanged('firstPhone');"><span class="title">First Box</span> Lorem ipsum sit dolor.</li> 
    <li onmouseover="phoneChanged('secondPhone');"><span class="title">Second Box</span> Lorem ipsum sit dolor.</li> 
    <li onmouseover="phoneChanged('thirdPhone');"><span class="title">Third Box</span> Lorem ipsum sit dolor.</li> 
    <li onmouseover="phoneChanged('fourthPhone');"><span class="title">Fourth Box</span> Lorem ipsum sit dolor.</li> 
    <li onmouseover="phoneChanged('fifthPhone');"><span class="title">Fifth Box</span> Lorem ipsum sit dolor.</li> 
    <li onmouseover="phoneChanged('sixthPhone');"><span class="title">Sixth Box</span> Lorem ipsum sit dolor.</li> 
    <li id="phoneChange"></li> 
</ol> 

，代碼：

<script> 
    function phoneChanged(className) { 
     document.getElementById('phoneChange').className = className; 
    } 
</script> 

此代碼反應鼠標懸停在每個項目上。要對點擊做出反應，請用「onclick」替換「onmouseover」。