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

Migrating js file from prototype to jQuery does not work

本文关键字：jQuery 不起作用 迁移 原型 js 文件      更新时间：2023-09-26

我正在将文件从原型迁移到jQuery。

原型：

function hideEditableMarkers() {
   $$('.edit_marker').each(function(el) {
  el.hide();
});
   $$('.show_marker').each(function(el) {
    el.show();
    });
}
Event.observe(window, 'load', hideEditableMarkers);

j查询：

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

应该是：

jQuery(document).ready(hideEditableMarkers);

您需要将函数引用传递给ready以便将其作为 DOM 就绪事件的回调处理程序执行。您当前正在做的是立即执行该函数（当元素不存在时），然后将该函数的返回（无）作为.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');
});
相关文章：