How do I delete a JSON object from localStorage, according to data assigned to currently clicked element?
情景
- 用户单击一个元素,该元素的图像背景已更改,并且分配给该元素的数据(onclick 属性)被插入到 localStorage:这部分工作正常。
-
现在 toggle 变量设置为 0,背景图像已更改,数据正在从本地存储中删除:这部分工作正常。
-
…
-
用户点击另一个元素(第一次点击数据被删除 prev div )。虽然在这种情况下应该插入一个新数据,但它没有?
json 数据:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Object {
sess_id : 182104, name :“AUTOMECH FORMULA”, city :“Cairo”, country :“Egypt”, event_url :“automech-formula” } events:189 Object { |
快照(针对点击的特定 div 上删除的所有数据):-
HTML:
1
|
|
Javascript:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
var image2 = ‘http://im.gifbt.com/images/star1_phonehover.png’;
var image1 = ‘http://im.gifbt.com/images/star1_phone.png’; var toggle = 1; function favaorite(sess_id,name,city,country,event_url,pointer){ // Push the new data (whether it be an object or anything else) onto the array if (toggle == 1){ }); |
小提琴
- 您可以尝试使用纯js吗?它可能会以某种方式强制缓存。或者强制刷新:复制一个节点中的目标,然后用新的 bg 将该节点读取到 dom
- 我无法挖掘这个问题
- stackoverflow.com/questions/17886578/refresh-part-of-page-di??v – 显示元素(不是页面)的基本刷新
主要问题是你试图 JSON.stringify 一个普通的 javascript 数组:
1
|
eventData = [];
|
虽然只有当你的数据是一个对象时才有效:eventData = {};
接下来是这样的:
1
2 3 4 5 |
delete value.sess_id;
delete value.name; delete value.city; delete value.country; delete value.event_url; |
使用上述方法,您实际上是在清空对象而不是删除它。因此,您的新数据如下所示: {}{}{}{}{}… (表示许多空的匿名对象)。要删除对象,首先您必须知道要删除哪个对象( (*) 参见下一部分)
我的建议/解决方案:
-
我将删除 onclick 属性并改用 jQuery\\ 的 .click() 事件处理程序。
-
我会将所有数据保存在 data 属性中 – 这样您可以非常轻松地将与元素关联的数据作为对象(无需进一步处理)。
-
检查 toggle 状态是不必要的,因为它会在每次点击时自然切换。您应该只检查对象的存在并相应地删除/插入它。对于图像本身,使用 .toggleClass() 并使用适当的图像背景设置 CSS 类(而不是以编程方式替换它)。
-
(*) 我会给 localStorage 中的每个对象一个键,以便以后可以识别它。它可以是任何具有指定元素的独特且可识别的(“可匹配”)。我会将其设置为当前单击元素的 id 属性,例如:fav1:{name :’blah’, …}, fav2:{…}, …
HTML:
1
2 3 4 5 6 |
<a href=“#” class=“favourate_dextop” id=“fav’.$data[$k][‘id’].'”
data–sess_id=“‘.$data[$k][‘id’].'” data–name=“‘.$name_event.'” data–city=“‘.$event_city.'” data–country=“‘.$event_country.'” data–event_url=“‘.$event_urls.'”> |
jQuery:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$(document).ready(function(){
// declare an empty object (not array): // instead of ‘onclick’ attribute, use jQuery .click() event handler: |
在你的 CSS 中添加一个 .faved 类,而不是用 jQuery:
替换图像背景
1
2 3 |
.favourate_dextop.faved, .favourate_dextop:hover{
background:url(‘http://im.gifbt.com/images/star1_phonehover.png’) no–repeat; } |
JSFiddle
- 当我单击星形图像时出现错误,它的背景图像没有改变,(平板电脑三星,android 手机).. 并且在刷新工作后我无法挖掘问题。
- @user4041461 我真的找不到可能导致您的问题的原因。我刚刚在我拥有的每台设备上检查过它,它运行良好。您使用的是什么浏览器(和发布版本)?它也不适用于我的 JSFiddle 示例?
- 与 jsfiddle 显示的问题完全相同的问题发生在 android mobile 中。
- 不,它不工作 mozziila、chrome、saafri 以及.. 切换图像
- 似乎 android 设备不喜欢 :hover CSS。您可能需要针对屏幕尺寸使用 @media 查询断点 jsfiddle.net/xxuhL555 是否有效? (我只为 1224 像素以上的屏幕设置了 CSS :hover)
- 抱歉,我没有任何 Android 设备
- 这对你有用吗? jsfiddle.net/7gaxaxfu(每次点击图片都会改变?)
- 但是你想要什么修改?就像我之前写的 – 这是 :hover 效果问题。悬停在移动设备上毫无意义(IOS 似乎以某种方式处理,但 android 不会),您必须处理不同屏幕尺寸的 @media 查询断点以在小屏幕上禁用 :hover (我以前的 JSFiddle 在评论)或移动检测(一些 jquery 插件可能会有所帮助),请参阅这个 SO 问题:stackoverflow.com/questions/8291517/…。没有真正万无一失的方法可以摆脱这个问题,所以我不能简单地为你解决它。
- 现在我有新问题 $(‘.favourate_dextop’).click(function(e) 在 html 加载浏览器为其分配类时起作用,现在在页面加载动态时出现问题(facebook 加载更多说)..in this click事件没有触发。我该如何解决这个问题。
- 让我们在聊天中继续这个讨论。
来源:https://www.codenong.com/29314766/