0

我有 20 个实验，每个实验有 3 个按钮。当我单击每个按钮时，我会得到一组图像幻灯片。现在我可以为一个实验执行此操作，该实验涉及该实验中 3 个按钮的 3 个功能。

我需要为 20 个这样的实验这样做，但要对所有 20 个实验继续这样做，我需要 60 个函数，这是不合理的。

这是一个此类按钮事件的代码。

HTML：

    <head>
    <script type="text/javascript">
    $(document).ready(function(){   
    $("#container1").hide();
    $("#container2").hide();
    $("#container3").hide();
    }); 
</script>
</head>
<body>
    <div>    
     <a id="a_exp1" href="javascript:void(0);" style="text-decoration:none;    color:black;">
    <div>
     <img src="listIm_1.png">
     <h5>AQUA HUNTER</h5>
     <p>Can you make a magnet fetch fish for you?</p></br><hr>
     </div>
     </a>
     </div>
     <audio id="button">
     <source src="button.wav" type="audio/wav"/>

      </audio>
     </body>

    <div id="container1" >
    <div id="slider1" >
        <ul>
            <li><img id="Img" src='slide_intro.png'/></li>
        </ul>
    </div>
</div>

JS：

$(function(){

    $("a").click(function(){
        var exp_id = $(this).attr("id");
        if(exp_id == "a_exp1"){                     
            $("#right").html("<div><img id='myimage1' onclick='changeimage1()'   src='build_i.png'/><img id='myimage2' onclick='changeimage2()' src='apply_i.png'/><img id='myimage3' onclick='changeimage3()' src='learn_i.png'/></div>")
        }
    });
});
    function changeimage1()
    { $("#nextBtn").remove();
      $("#prevBtn").remove();
      $("#PicInRightTitle").css({'visibility':'hidden'});    
      $("#container2").hide();
      $("#container3").hide();
      $("#container1").show();
      $("#slider").easySlider({       
          auto: false, 
          continuous: true
      });

      document.getElementById('button').play();
      cc=0;
      if (cc==0) 
      {
          cc=1;
          document.getElementById('myimage1').src="build_a.png";
          document.getElementById('myimage2').src="apply_i.png";
          document.getElementById('myimage3').src="learn_i.png";
      }
    }

现在，在这个函数中，有几行是专门针对这一单键单击的，其中几行可以应用于所有 60 个函数。我怎样才能简化这个？如何将它循环到一个函数中？

4

2 回答 2

0 
function ChangeImage () {}

ChangeImage.prototype.action = function () {
    console.log('do some common things');
}

var ChangeImageTwo = function () {
    this.action = function () {
        console.log('do some unique things');
        ChangeImageTwo.prototype.action.call();
        console.log('do some more unique things');
    }
}

ChangeImageTwo.prototype = new ChangeImage;

new ChangeImageTwo().action();

小提琴

于 2013-04-04T07:09:49.957 回答
0

你必须重新考虑你的 js 和结构。

您只需要一个函数，再加上整个按钮集上的一个事件的绑定。

粗略的想法

第一步是从按钮到图片集的映射。一种简单的方法可以是关联数组或对象字面量。

var buttonToImages = {
     "a_exp1" : ['build_a.png', 'apply_i.png', 'learn_i.png'],
     "a_exp2" : ['build_a2.png', 'apply_i2.png', 'learn_i2.png']
     //and so on...
}

然后，您可以为每个锚绑定一个通用侦听器。您可以避免为每次单击创建包含三个图像的 div：您可以在单击时操作静态 html。

$("a").each(function(i, anchor){
         var images = buttonToImages[anchor.attr("id")];
         anchor.click(function(){
              $('myimage1').attr("src")=images[0];
              $('myimage2').attr("src")=images[1];
              $('myimage3').attr("src")=images[2];
         });
});

当您单击实验按钮时，这将初始化三个图像。

然后，如果您在单击图像本身时必须在图像上循环。从您的问题中不清楚图像背后的逻辑是什么：如果您可以依赖一些命名约定，那么使用单个侦听器很容易操作源。

如果没有命名约定，您可以更改 buttonToImages 字典并在其中列出每个标签 img 的图像序列。

我还不能添加评论，所以如果你觉得这个指示有用，我会更准确

于 2013-09-09T17:23:27.860 回答