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事件的回调处理程序执行。你现在正在做的是立即执行该函数（当元素不存在时），然后传递该函数的返回（无）作为.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');
});

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

4 个答案: