Aktualisiere Datenobjekt mit jquery

Question

Ich versuche, 'ID' und 'ausgewählt' in Daten-Optionen zu aktualisieren.

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> 

Ich bin in der Lage, sie zu verweisen und die richtigen Werte zu meiner AJAX-Funktion übergeben.

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

Alles außer diesem funktioniert:

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

Ich habe, um herauszufinden, nicht in der Lage gewesen, wie diese Werte in meinem ursprünglichen Elemente zu aktualisieren.

Answer 1

Beachten Sie, dass Eigenschaften von data-* bei HTML sollte in doppelte Anführungszeichen Eigenschaften festlegen data-* Attributwert als gültig JSON innerhalb HTMLdocument.

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

für Fähigkeit, ein JavaScript-Objekt bei

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

---

zu definieren Wenn Sie die tatsächliche versuchen, zu aktualisieren HTML Sie HTMLElement.dataset verwenden können, 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); 

} 

Inspecting bei DevTools oder Developer Tools zeigt, dass das Attribut data-* bei HTMLdocument aktualisiert wird.

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

Ihr Code aktualisiert das Datenobjekt mit der Referenz des Elements erstellt. Es werden Aktualisierungen an dem Objekt und nicht an dem tatsächlichen Element vorgenommen. Um die Elementattribute zu aktualisieren, verwenden Sie folgenden Code, nachdem Sie Werte in featureData festgelegt haben.

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