javascript開關盒不能正常工作？

我有下面的代碼，我使用開關的情況下切換圖片的src與按鈕..我不知道爲什麼第一種情況下的「警報」沒有functoning ..javascript開關盒不能正常工作？

<div id="main_img"> 
    <center> 
    <button style="width:100;height:100" onClick="LastPic();"><---</button> 
    <img id="img" src="13.jpg" height=70% width=70%> 
    <button style="width:100;height:100" onClick="FirstPic();">---></button> 
</div> 

<script> 
    var james = document.getElementById("img").getAttribute('src'); 
    document.write(james); 

    function FirstPic(){ 
     switch (james){ 
     case "12.jpg": 
      document.getElementById("img").src = "13.jpg"; 
     break; 
     case "13.jpg": 
      document.getElementById("img").src = "14.jpg"; 
     break; 
     case "larry": 
      alert('Hey'); 
     break; 
     default: 
      alert('Default case'); 
     break; 
    } 
    } 
</script>

來源

2013-07-22 Shawn

'src'會返回完整路徑'http：//.../ 12.jpg'，請使用'getAttribute'來代替。 – mohkhan

啊，你是對的，朋友...我必須指定要獲得的屬性嗎？ – Shawn

yeh .. src' one ... – mohkhan

你的問題是，每次你調用你的函數時，james變量都是一樣的，它需要更新。

<div id="main_img"> 
<center> 
<button style="width:100;height:100" onclick="LastPic();"><---</button> 
<img id="img" src="13.jpg" height=70% width=70%> 
<button style="width:100;height:100" onclick="FirstPic();">---></button> 
<div id="imagesrc">13.jpg</div> 
</div> 
<script> 
function FirstPic(){ 

var james = document.getElementById("img").getAttribute('src'); 
var imagesrc=document.getElementById('imagesrc'); 
switch (james) 
{ 
    case "12.jpg": 
james = "13.jpg"; 
break; 

    case "13.jpg": 
james = "14.jpg"; 
break; 

    case "larry": 
     alert('Hey'); 
     break; 

    default: 
     alert('Default case'); 
     break; 
} 
imagesrc.innerHTML=james; 
document.getElementById('img').src=james; 
} 
</script>

JsFiddle

來源

2013-07-22 04:23:06

附加類型的按鈕類型= 「按鈕」

<button type="button" style="width:100;height:100" onClick="FirstPic();">---></button>

附加屬性類型=在按鈕的「按鈕」所以頁面不回發

來源

2013-07-22 04:40:13

只在按鈕中添加type =「button」，以便您的頁面不會刷新... –

試試這個工作正常。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script> 
function myFunction() 
{ 
var src = $('img[alt="example"]').attr('src'); 
alert("source of image with alternate text = example - " + src); 

switch (src) 
{ 
    case "12.jpg": 
document.getElementById("img").src = "13.jpg"; 
break; 

    case "13.jpg": 
    alert('sa'); 
    document.getElementById("img").src = "14.jpg"; 
break; 

    case "larry": 
     alert('Hey'); 
     break; 

    default: 
     alert('Default case'); 
     break; 
} 
} 
</script> 
<div id="main_img"> 

<button style="width:100;height:100" onClick="LastPic();"><--- </button> 
<img alt="example" id="img" class="imagess" src="13.jpg" height=70% width=70%> 
<button style="width:100;height:100" onClick="myFunction();">---></button> 
</div>

來源

2013-07-22 04:46:04

javascript開關盒不能正常工作？

回答

相關問題