用jquery更新数据对象

我试图在数据选项中更新'id'和'selected'。用jquery更新数据对象

HTML：

<span class="re_highlight-feature" data-toggle="tooltip" data-animation="false" data-placement="top" title="" data-options="{'id':0,'name':'Appliance','value':'Dryer','selected':false}" data-original-title="Highlight Dryer">Dryer</span>

我能够引用它们，并通过正确的价值观，以我的AJAX功能。

JS：

$('.re_highlight-feature').click(function(e) { 

      e.preventDefault(); 
      var feature = $(this); 
      var featureDislay = feature.text(); 
      var featureData = feature.data('options'); 

      feature.html('<i class="fa fa-refresh fa-spin fa-fw"></i><span class="sr-only">Loading...</span>'); 

      $.ajax({ 
       type:"POST", 
       url: "/wp-admin/admin-ajax.php", 
       data: {action:'highlightFeature', id:featureData.id, name:featureData.name, value:featureData.value, selected:featureData.selected}, 
       success:function(json){ 

        obj = JSON && JSON.parse(json) || $.parseJSON(json); 
        var recordID = obj.id; 

        if (recordID == 0){ 
         featureData['id'] = 0; 
         featureData['selected'] = false; 
        } else { 
         featureData['id'] = recordID; 
         featureData['selected'] = true; 
        } 

        feature.html(featureDislay); 
        feature.toggleClass('mark'); 

       }, 
       error: function(errorThrown){ 
        alert(errorThrown); 
       } 
      }); 

      return false; 
     });

一切正常，除了这一点：

if (recordID == 0){ 
        featureData['id'] = 0; 
        featureData['selected'] = false; 
       } else { 
        featureData['id'] = recordID; 
        featureData['selected'] = true; 
       }

我一直无法弄清楚如何我原来的元素中更新这些值。

来源

2017-07-15 Ira Monko

如果你做'console.log（typeof featureData）'我会打赌你好钱你会得到'string'而不是'object'。如果你想jQuery为你解析它，它必须是***有效的*** JSON，这意味着双引号 – adeneo

[观察此]（https://jsfiddle.net/adeneo/nnov3r7u/1/） – adeneo

控制台.log（typeof featureData）返回对象 –

注意，在HTML的data-*性质应该由双引号括起来的属性来设置data-*内HTMLdocument为有效JSON属性值。

data-options='{"id":0,"name":"Appliance","value":"Dryer","selected":false}'

在

var featureData = JSON.parse(feature[0].dataset.options);

定义JavaScript对象如果你要更新的实际HTML可以使用HTMLElement.dataset，JSON.stringify()能力，JSON.parse()

if (recordID == 0) { 

    featureData.id = 0; 
    featureData.selected = false 
    feature[0].dataset.options = JSON.stringify(featureData); 

} else { 

    featureData.id = recordID; 
    featureData.selected = true; 
    feature[0].dataset.options = JSON.stringify(featureData); 

}

检查.re_highlight-feature在DevTools或Developer Tools显示data-*属性更新在HTMLdocument。

var feature = document.querySelector(".re_highlight-feature"); 
 

 
var featureData = JSON.parse(feature.dataset.options); 
 

 
console.log(featureData); 
 

 
featureData.id = 1; 
 
featureData.selected = true 
 
feature.dataset.options = JSON.stringify(featureData); 
 

 
console.log(JSON.parse(feature.dataset.options)); 
 

 
console.log(feature.outerHTML);

<span class="re_highlight-feature" data-toggle="tooltip" data-animation="false" data-placement="top" title="" data-options='{"id":0,"name":"Appliance","value":"Dryer","selected":false}' data-original-title="Highlight Dryer">Dryer</span>

来源

2017-07-15 18:25:32 guest271314

您的代码更新与所述元件的所述参考所创建的数据对象。更新对象而不是实际元素。要在featureData中设置值后更新元素属性，请使用以下代码。

feature.attr("data-options",JSON.stringify(featureData));

来源

2017-07-15 18:30:34

用jquery更新数据对象

回答

相关问题