Question

我有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个函数。我该如何简化这个？如何将其循环到一个函数中？

Answer 1

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();

Fiddle

Answer 2

你必须重新考虑你的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的图像序列。

我还不能添加评论，所以如果你能找到有用的指示我会更精确

循环了很多jQuery和JavaScript

2 个答案: