javascript - 使用 wheelzoom 的 .js 中的一组脚本调用按钮

Question

我有 12 个按钮，每个按钮都有一个 ID，我正在使用这个脚本来执行操作。

$(document).ready(function() {
  $("#WEyear18000").click(function() {
    $("#WEtextarea").load("Files/Docs/y18000.txt");
    $('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
    $('#WEee244f5837 .PullZone').click();
    wheelzoom(document.querySelectorAll('img'));
  });
});

WEyear18000，是按钮的id，WEtextarea，是按钮点击时显示txt的div的id，WEimage_view， WEee24f5837 是在单击同一按钮时显示新图像的 div 的 id，是关闭按钮所在的可折叠面板的 id。

一个 .js 文件中有 12 个这样的脚本语句。

一切正常，但在单击第二个或另一个按钮后会产生一些奇怪的效果，页面上的所有图像都会消失，但按钮上的图像会单击。页面在这里，page with issue

任何关于如何流线脚本的建议。我是脚本编写的新手，但设法把它搞得一团糟，但对其余页面图像产生了不利影响。 jsfiddle 的建议和示例。提前致谢。

<div id="wrapper">
  <div id="WEtextarea"> </div>
  <div id="WEimage_view"></div>
</div>

CSS 控制 div 的大小和所有方面。

Answer 1

我尝试了你所有的菜单项...并没有注意到这样的错误。

所以，当您在这里时...我有一个建议，可以减少由重复 12 次的小块组成的长脚本。

我会将 map 定义为对象，如下所示:

var maps = [
  {
    buttonId: "WEyear18000",
    text: "Files/Docs/y18000.txt",
    image: "Files/Image/treesimages/PalaeoGlaciolMaps.jpg"
  },
  {
    // other 11 objects using the same structure...
  }
];

我会在 HTML 中为每个元素添加一个类，如下所示:

<div id="WEyear18000" class="BaseDiv RBoth OEWELinkButton OESK_WELinkButton_Default OECenterAH clickHandlerClass" style="z-index:1">

然后，我会使用像这样的更短的函数:

$(document).ready(function() {

  $(".clickHandlerClass").click(function(){

    // Get the id of the clicked menu item
    var thisId = $(this).attr("id");

    // Find its related object
    var mapIndex = -1;
    for(i=0;i<maps.length;i++){
      if( maps[i].buttonId == thisId ){
        mapIndex = i;
      }
    }

    if(mapIndex != -1){
      // Use the object infos in the page elements.
      $("#WEtextarea").load(maps[mapIndex].text);
      $('#WEimage_view').html('<img src="'+maps[mapIndex].image+'" >');
      $('#WEee244f5837 .PullZone').click();
      wheelzoom(document.querySelectorAll('img'));
    }else{
      console.log("Undefined map or id error...");
    }

  });
});

对象数组更容易维护...并且更容易添加一个额外的按钮。
您可以使用除"clickHandlerClass" 之外的其他类名。
;)