Question

无线电输入无法使用localStorage

我使用localStorage作为很多例子，除了starRating之外我和我合作很好。

以下是示例example

我尝试了很多代码但不起作用

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

<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">

5 4 3 2 1 加

$(".starRating").on("click", function(){
        selected_rating = $('input', this).data("inputrating");
        selected_id = $('input', this).data("rating-id"); 
        console.log(selected_rating)

    });

Answer 1

您正在努力解决的关键问题是如何确定哪个元素最适合触发您的功能。您目前正在触发.starRating这是一个跨度。可以使用它作为触发器，但只要有人在.inputrating上选择一个值，就可以简单地触发该函数，这是一个对所有星级评分单选按钮都是唯一的类。

尝试使用此代码：

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

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

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

});

如果您发现我已将click更改为change。这将使您的代码仅在评级选择时触发一次。这样，如果您最终运行ajax函数来更新数据库，那么如果用户决定垃圾邮件一遍又一遍地点击同一个单选按钮，它将不会被反复调用。

这是一个展示解决方案的工作小提琴：JSFiddle

Answer 2

您需要将事件绑定更改为单选按钮，而不是包含它们的跨度。

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

 this.value

在事件处理程序中，您只需要它。

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

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

这是一个有效的小提琴：https://jsfiddle.net/6jfey3cj/4/

屏幕截图显示了localStorage中不同网站的评分。

Answer 3

您可以按以下方式更改您的javascript功能

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

}）;

更新小提琴 - https://jsfiddle.net/tfhg15xw/2/

无线电输入不与localStorage一起使用

3 个答案: