Javascript 将js文件从prototype迁移到jQuery不起作用

我正在将文件从prototype迁移到jQuery

原型：

function hideEditableMarkers() {
   $$('.edit_marker').each(function(el) {
  el.hide();
});
   $$('.show_marker').each(function(el) {
    el.show();
    });
}

Event.observe(window, 'load', hideEditableMarkers);

jQuery：

function hideEditableMarkers() {
  jQuery('.edit_marker').each(function(el){
    el.hide();
    });

  jQuery('.show_marker').each(function(el){
    el.show();
    }); 
}

jQuery(document).ready(hideEditableMarkers());

---

我不知道为什么它不工作。

每个回调函数的第一个参数是元素的索引，而不是对它的引用

这是jquery代码

function hideEditableMarkers() {
  $('.edit_marker').each(function(idx,el){
    $(el).hide(); // You may use 'this' variable in here as it points to the current element as well
    });

  $('.show_marker').each(function(idx,el){
     $(el).show();
    }); 
}

这：

应该是：

jQuery(document).ready(hideEditableMarkers);

您需要将函数引用传递给

ready

，以便它作为DOM ready事件的回调处理程序执行。当前所做的是立即执行该函数（当元素不存在时），然后将该函数的返回值（nothing）作为

.ready（）

的回调传递给每个元素内部的

$（this）

，以便它接受当前元素。。。您拥有的是索引，并将索引用作jquery选择器

el.hide（）

试试这个

function hideEditableMarkers() {
 jQuery('.edit_marker').each(function(el){
   $(this).hide();
 });

 jQuery('.show_marker').each(function(el){
   $(this).show();
  }); 
 }

jQuery(document).ready(function(){
  hideEditableMarkers() ;
});

//or

jQuery(document).ready(hideEditableMarkers);

---

我认为功能应该是可重用的：

/*global jQuery */

function toggleMarkers (hideSelector, showSelector) {

    jQuery(hideSelector).each(function () {
        jQuery(this).hide();
    });

    jQuery(showSelector).each(function () {
        jQuery(this).show();
    });

}

jQuery(document).ready(function ($) {
    toggleMarkers('.edit_marker', '.show_marker');
});

/*global jQuery */

function toggleMarkers (hideSelector, showSelector) {

    jQuery(hideSelector).each(function () {
        jQuery(this).hide();
    });

    jQuery(showSelector).each(function () {
        jQuery(this).show();
    });

}

jQuery(document).ready(function ($) {
    toggleMarkers('.edit_marker', '.show_marker');
});