Question

我在这里建立一个网站我正在为困扰我的事情而苦苦挣扎我正在尝试制作一个增量按钮，它将改变图像取决于增量参数例如，如果值为'0'，则图片为'a' 然后我增加它，值为'1，图片为'b'，依此类推我在这里做了一些代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Change Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function increaseValue ( eleId ) {
  var ele = document.getElementById(eleId);  
  ele.value = parseInt(ele.value) + 1;}
  function decreaseValue ( eleId ) {
  var ele = document.getElementById(eleId);
    if(ele.value!=0){
      ele.value = parseInt(ele.value) - 1;
  }};
 function changeIt(imageName,objName)
   {
var obj = document.getElementById(objName);
var imgTag = "<img src='"+imageName+"' border='0' />";

obj.innerHTML = imgTag;

return; 
   };
 </script>
 </head>

 <body>
 <div id="image1">
  <img src="1.jpg" border="0" alt="" /> 
 </div>

 <br><br>

 <input type="text" value="1" id="incrementer" />
 <input type="button" value="+"    onclick="increaseValue('incrementer'),changeIt('button/next.png','image1');">
 <input type="button" value="-"  onclick="decreaseValue('incrementer'),changeIt('button/plus.png','image1');">
 </html>

任何人都可以帮忙吗？

Answer 1

使用jQuery的简单解决方案可能如下：

$(":button").click(function() {
    var currentValue = $(":text").val();
    var symbol = $(this).val();
    if(symbol == "+") {
        currentValue++;
        $(":text").val(currentValue);
    }
    else {
    currentValue--;
        $(":text").val(currentValue);
    }
    $("img").hide();
    $("img:eq("+(currentValue-1)+")").show();
});

<强> HTML

<div id="image1">
  <img src="http://dummyimage.com/100x100/000/fff&text=1.jpg" border="0" alt="" />
   <img src="http://dummyimage.com/100x100/000/fff&text=2.jpg" border="0" alt="" /> 
   <img src="http://dummyimage.com/100x100/000/fff&text=3.jpg" border="0" alt="" />  
 </div>

 <br><br>

 <input type="text" value="1" id="incrementer" />
 <input type="button" value="+">
 <input type="button" value="-"">

演示：http://jsfiddle.net/KQP99/

根据增量参数更改图像

1 个答案: