Javascript 无线电输入不适用于本地存储

无线电输入不适用于本地存储

我在很多例子中使用了localStorage，除了使用starRating外，其他方面都很好

下面是一个例子

我尝试了许多代码，但都不起作用

请给我举个例子。对不起，我是新手

<table>
   <thead>
      <tr>
         <th STYLE="width:200px">link</th>
         <th STYLE="width:200px">rating</th>
         <th STYLE="width:200px">Options</th>
      </tr>
   </thead>
   <tr>
      <td>
         <A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">site a</A>
      </td>
      <td>
         <span class="starRating">
            <input CLASS="inputrating" CHECKED id="rating_9_5" type="radio" name="rating_9" value="5">
            <label for="rating_9_5">5</label>
            <input CLASS="inputrating" id="rating_9_4" type="radio" name="rating_9" value="4">
            <label for="rating_9_4">4</label>
            <input CLASS="inputrating" id="rating_9_3" type="radio" name="rating_9" value="3">
            <label for="rating_9_3">3</label>
            <input CLASS="inputrating" id="rating_9_2" type="radio" name="rating_9" value="2">
            <label for="rating_9_2">2</label>
            <input CLASS="inputrating" id="rating_9_1" type="radio" name="rating_9" value="1">
            <label for="rating_9_1">1</label></span>
      </td>
      <td>
         add
      </td>
   </tr>
   <tr>
      <td>
         <A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">site b</A>
      </td>
      <td>
         <span class="starRating">

---

您正在努力解决的关键问题是如何确定哪种元素最适合触发您的函数。您当前正在

.starting

上触发，这是一个span。可以将其用作触发器，但更合理的做法是，只要有人在

上选择一个值，就可以简单地启动该函数。inputting

是所有星级单选按钮所独有的一个类

请尝试以下代码：

$(".inputrating").on("change", function(){

    checked_rating = $(this).val();
    checked_id = $(this).attr('id');

    console.log(checked_rating);
    console.log(checked_id);

});

如果您注意到我更改了

，请单击
以
更改
。这将使您的代码只在选择评级时触发一次。这样，如果您最终运行ajax函数来更新数据库，那么如果用户决定反复单击同一个单选按钮，它就不会不断被调用

下面是一个演示解决方案的工作提琴：
您可以按如下所示更改javascript函数

$(".inputrating").on("click", function(){
    selected_rating = $(this).val();
    selected_id = this.id;
    console.log(selected_rating);
    console.log(selected_id);

}))

更新小提琴-
您需要将事件绑定更改为单选按钮，而不是包含它们的范围

接下来，您需要访问单选按钮的值，而不是使用jQuery.data（）方法，我不知道您在用它做什么

 this.value

在事件处理程序中，您只需要这样做

接下来，您需要实际存储没有任何代码的值：

if(window.localStorage){
  localStorage.setItem("Site A Rating", this.value);
} else {
  console.log("localStorage not supported."); 
}

这是一把小提琴：

以及显示不同站点在localStorage中的分级的屏幕截图

@sabrys56您遇到了哪些错误？你加载了我在底部发布的链接了吗？这是你在问题中所发布内容的有效版本。@ScottMarcus感谢你指出这一点。我没有意识到这一点。为了简单起见，我将把它改回
click
。@ScottMarcus我很清楚，你是说
change
会在单击另一个具有相同
名称的单选按钮时触发吗？我刚才试过这个，只有在选中时才触发更改。我是否遗漏了什么？我单击了2 satr，但我将站点刷新回了5satr@sabrys56控制台中是否输出了正确的数据？你的问题与在任何地方存储变量以在页面刷新时重新加载无关。我需要美国本地存储，而不需要在我的站点中使用计时器进行警报本地存储工作。你没有发布本地存储代码。但是，首先，让我们确保我们有正确的数据。你能回答什么$（这个）.data（“评级id”）；他应该回来吗？我的回答显示了如何接收单选按钮组的值并将它们存储在本地存储中，就像你的问题所问的那样。我提供了一个功能完整的示例，并用一个屏幕截图确认了结果。为了让更多的网站都能做到这一点，我所要做的就是扩展我已经给你的例子。你已经知道答案了。这段代码中没有任何东西对本地存储有任何作用。你想存储什么数据？我有很多链接，我需要usa标记，因为所有链接
选定的\u id
将在你的代码中为空，并且你的代码与本地存储无关。有道理，我更新了小提琴，但无论如何，本地存储的问题并不清楚。不管怎么说，你的答案确实考虑到了存储。但是你认为会话存储可以代替本地存储吗？不确定，但OP询问了本地存储。