如何將該JavaScript轉換為jQuery？

Question

我正在嘗試在我的一個項目中實現localStorage ，但是遇到了問題，因為這部分代碼破壞了我的jQuery ui-layout。

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/