Question

我在我的文件中有这个代码:(我省略了许多其他无关紧要的代码）

<div data-role="panel" id="loc_panel"> 
    <h2>Panel Header</h2>
    <p>info about this stop</p>
</div> <!-- /panel -->

<a href="#loc_panel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow" id="panel_button">Open Panel</a>

<a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn  ui-corner-all" id="button_stop7" data-transition="flip">button_stop6</a>
 <a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn  ui-corner-all" id="button_stop6" data-transition="flip">button_stop7</a>

我想更改面板和按钮中的文本，以便在单击按钮停止7时查看有关停止7的信息，如果单击该按钮则可以查看停止6。我也想使用本地存储（html5！）。

我在头部的脚本标签中尝试了这个：

$(document).on("pagecreate", function () {
    $("#button_stop6, #button_stop7").on("click", function () {
        $("#tt_popup p").text("Button with ID " + this.id + " was clicked");

        localStorage.setItem('id','this.id');
        var id = localStorage.getItem('id');
        document.write(id);
        document.getElementById("panel_button").value= id;

    });
});

当我运行它时，页面会转到一个空白屏幕，上面写有this.id。因此，设置＆＃39; this.id＆＃39;到本地存储工作，但我当然不希望字符串this.id添加到本地存储，我希望将id设置为本地存储。

面板按钮上的值不会改变。

我甚至不接近写正确的javascript，但我尽力学习！

正如您所看到的，面板信息的javascript也缺失了，所以就像 document.getElementById（＆＃34; panel_info＆＃34;）。value =＆＃34;对应于id的值...＆＃34 ;; 但是......一次只做一件事。

Answer 1

首先，要在本地存储中设置id值，您应该替换它：

localStorage.setItem('id','this.id'); 此 localStorage.setItem('id', this.id);

然后，我不确定你到底想要什么，但你在这一行中也有错误document.getElementById("panel_button").value= id; 用此替换 document.getElementById("panel_button").setAttribute('value', id);

我还注意到你有这个选择器$("#tt_popup p")，但你没有任何匹配它的html代码，所以你没有任何元素来改变文本。

最后，尝试重构您在本地存储上设置值的代码，然后检索它并将其分配给新的var。我想你可以避免这种情况。

看看this。

使用本地存储来更改按钮和面板中的文本

1 个答案: