javascript - 本地存储错误

Question

请有人告诉我我写的代码有什么问题。

Js

 $("button").click(function() {
          document.getElementById("demo").innerHTML = document.getElementById("asd").value;
      });
        $(function() {
            var edit = document.getElementById('demo');
            $(edit).blur(function() {
                localStorage.setItem("data1", this.innerHTML)
            });
            if (localStorage.getItem("data1")) {
                edit.innerHTML = localStorage.getItem("data1");
            }
        });

HTML

<input type="text" id="asd">
<button>asdsad</button>
<p id="demo"></p>

但同样的代码在这方面工作得很好:

Js

$(function() {
            var edit = document.getElementById('demo');
            $(edit).blur(function() {
                localStorage.setItem("data1", document.getElementById("demo").innerHTML)
            });
            if (localStorage.getItem("data1")) {
                edit.innerHTML = localStorage.getItem("data1");
            }
        });

HTML

<div contenteditable="true" id="demo">Some text here</div>

请有人告诉我这里出了什么问题。

Answer 1

当您将 edit 变量(包含 DOM 元素)作为参数传递给 jQuery 时，将返回一个 jQuery 对象。这会将 blur 事件中的 this 的范围更改为 jQuery 对象。 jQuery 没有 innerHTML 的属性，所以它返回 undefined。 JavaScript DOM 元素当然有 innerHTML 属性，所以这就是第二个示例起作用的原因。

修复第一个示例的一种方法是替换它:

$(edit).blur(function() {
    localStorage.setItem("data1", this.innerHTML)
});

有了这个:

$(edit).blur(function() {
    localStorage.setItem("data1", $(this).html());
});