用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更新數據對象

回答

相關問題