javascript - 将 js 文件从原型迁移到 jQuery 不起作用

Question

我正在将文件从原型迁移到 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());

我不知道为什么它不起作用。

Answer 1

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

所以这是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();
    }); 
}

Answer 2

这个：

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

应该：

jQuery(document).ready(hideEditableMarkers);

您需要将函数引用传递给，ready以便将其作为 DOM 就绪事件的回调处理程序执行。您当前正在做的是立即执行该函数（当元素不存在时），然后将该函数的返回（无）作为.ready().

Answer 3

在每个内部使用$(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);

Answer 4

我相信一个函数应该是可重用的：

/*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');
});