javascript - javascript 开关盒不能正常工作？

Question

我有以下代码，我正在使用 switch case 用按钮切换图片的 src .. 我不知道为什么第一个 case 的“alert”不起作用..

<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>

Answer 1

试试这个它工作正常。

<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>

Answer 2

您的问题是每次调用函数时 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>

提琴手

Answer 3

添加按钮类型 type="button"

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

在按钮中添加属性type="button"所以页面不是回发