如何将此 JavaScript 转换为 jQuery？

Question

我正在尝试将 localStorage 实现到我的一个项目中，但我遇到了问题，因为这部分代码破坏了我的 jQuery ui 布局。

function $(id) {
  return document.getElementById(id);
}

为了使布局工作，我必须添加一个$：

$(document).ready(function($) {

由于我不知道如何编写javascript或jquery，我只能实现它，下面的代码可以写在一个这样我就可以避免使用“function $(id)”部分和“$”？

这是完整的代码：

// return value - this the prob?
function $(id) {
  return document.getElementById(id);
}

// write data to the local storage
function writeLocal() {
  var key = $('lsKey').value;
  var data = $('html').value;
  localStorage.setItem(key, data);
  updateItemsList();
}

// remove the item from localStorage
function deleteLocal(keyName) {
  localStorage.removeItem(keyName);
  updateItemsList();
}

// read the actual data for the key from localStorage
function readLocal(keyName) {
  $('lsKey').value = keyName;
  $('html').value = localStorage.getItem(keyName);
}

// allow retrieval of localStorage items
function updateItemsList() {  
  var items = localStorage.length;  
  var s = '<p>Saved Items</p>';
  s+= '<ul>';  
  for (var i=0; i<items; i++) {  
    var keyName = localStorage.key(i);
    s+= '<li class="lsdLI">' + 
        '<div style="float:right;">' + 
        '<input onClick="readLocal(\''+keyName+'\');"/>'+ 
        '<input onClick="deleteLocal(\''+keyName+'\');"/>'+
        '</div>'+
        '<b>'+keyName+'</b>' +
        '</li>';
  }

  $('lsValues').innerHTML = s + '</ul>';
}

// start by loading up whatever is persistant in localStorage

function load() {  
updateItemsList(); 
}  
window.onload = load; 

Answer 1

所以听起来您正在使用 jquery UI 并且它导致了冲突。最简单的事情可能只是重命名您正在使用的 $ 便利函数...

// return value - this the prob?
function $(id) {
  return document.getElementById(id);
}

// write data to the local storage
function writeLocal() {
  var key = $('lsKey').value;
  var data = $('html').value;
  localStorage.setItem(key, data);
  updateItemsList();
}

// remove the item from localStorage
function deleteLocal(keyName) {
  localStorage.removeItem(keyName);
  updateItemsList();
}

// read the actual data for the key from localStorage
function readLocal(keyName) {
  $('lsKey').value = keyName;
  $('html').value = localStorage.getItem(keyName);
}

// allow retrieval of localStorage items
function updateItemsList() {  
  var items = localStorage.length;  
  var s = '<p>Saved Items</p>';
  s+= '<ul>';  
  for (var i=0; i<items; i++) {  
    var keyName = localStorage.key(i);
    s+= '<li class="lsdLI">' + 
        '<div style="float:right;">' + 
        '<input onClick="readLocal(\''+keyName+'\');"/>'+ 
        '<input onClick="deleteLocal(\''+keyName+'\');"/>'+
        '</div>'+
        '<b>'+keyName+'</b>' +
        '</li>';
  }

  $('lsValues').innerHTML = s + '';
}

// start by loading up whatever is persistant in localStorage

function load() {  
updateItemsList(); 
}  
window.onload = load;   

将您拥有的内容转换为 jQuery 也不难，只需从每个 jQuery 对象中获取第一个项目即可。

// write data to the local storage
function writeLocal() {
  var key = $('lsKey')[0].value;
  var data = $('html')[0].value;
  localStorage.setItem(key, data);
  updateItemsList();
}

// remove the item from localStorage
function deleteLocal(keyName) {
  localStorage.removeItem(keyName);
  updateItemsList();
}

// read the actual data for the key from localStorage
function readLocal(keyName) {
  $('lsKey')[0].value = keyName;
  $('html')[0].value = localStorage.getItem(keyName);
}

// allow retrieval of localStorage items
function updateItemsList() {  
  var items = localStorage.length;  
  var s = '<p>Saved Items</p>';
  s+= '<ul>';  
  for (var i=0; i<items; i++) {  
    var keyName = localStorage.key(i);
    s+= '<li class="lsdLI">' + 
        '<div style="float:right;">' + 
        '<input onClick="readLocal(\''+keyName+'\');"/>'+ 
        '<input onClick="deleteLocal(\''+keyName+'\');"/>'+
        '</div>'+
        '<b>'+keyName+'</b>' +
        '</li>';
  }

  $('lsValues')[0].innerHTML = s + '';
}

// start by loading up whatever is persistant in localStorage

function load() {  
updateItemsList(); 
}  
window.onload = load;   

除了这两个选项之外，您还需要对代码进行更多更改，以真正以 jQuery 方式完成操作。而不是 $('lsKey').value 它将是 $('lsKey').val() 等。您必须更新代码才能使用所有 jQuery 方法。

Answer 2

您应该首先定义函数，然后导入 jquery 库。然后你可以进行这个调用

$.noConflict();

，它会将 $ 变量保持在导入 jquery 之前的状态。之后，您可以使用以下命令访问 jquery：

  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });

因此，您可以在该函数（或任何将 jQuery 作为参数传递的函数）内使用 jquery 的 $ 变量，并在外部使用您自己的 $ 变量。

您可以在此处阅读有关该主题的更多信息： http://api.jquery.com/jQuery.noConflict/< /a>