jqueryでデータオブジェクトを更新します

Question

データオプション内で 'id'と 'selected'を更新しようとしています。

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; 
       } 

私は私の元の要素の中にこれらの値を更新する方法を見つけ出すことができませんでした。 HTMLでdata-*の性質は、二重引用符で囲まれたプロパティを設定する必要がありますdata-*HTMLdocument内JSONとして有効な属性値を

Answer 1

注意。あなたが検査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); 

} 

を使用することができますHTML実際を更新しようとしている場合

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

---

でJavaScriptオブジェクトを定義する機能のための

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

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

Answer 2

あなたのコードは、要素の参照して作成されたデータオブジェクトを更新しています。 オブジェクトは更新され、実際の要素は更新されません。 elementDataを更新するには、featureDataに値を設定した後で次のコードを使用します。

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