Как я могу преобразовать этот JavaScript в jQuery?

Question

Я пытаюсь внедрить localStorage в один из моих проектов, но у меня возникла проблема, потому что эта часть кода нарушает мой пользовательский макет jQuery.

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/