Question

我有以下代码，我使用开关盒用按钮切换图片的src ..我不知道为什么第一个案例的“警告”没有功能。

<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

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

Answer 2

添加按钮类型 type =“button”

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

在按钮中添加属性 type =“button”，以便页面不回发

Answer 3

试试这个工作正常。

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

javascript开关案例不能正常工作？

3 个答案: