Wie Unterelement von Datenattribut mit Jquery

Question

ich von Sub-Element ändern, ändern möchten unter Daten

<div class="blue-shape" 
data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'> 

dieses Attribut für i unter jQuery-Code hinzugefügt haben, aber es funktioniert nicht

$(document).ready(function(){ 
    jQuery('.blue-shape').attr("data-actions",{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''}); 
}); 

.blue-shape ist Div-Klassenname, wo ich Datenattribut ändern möchte

Answer 1

jQuery.attr() erwartet zweiten Parameter Zeichenfolge sein.

haben einen Blick auf jQuery.data() auch

$('document').ready(function() { 
 
    jQuery('.blue-shape') 
 
    .attr("data-actions", "{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''}"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="blue-shape" data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>DATA</div>

Answer 2

Sie müssen String in 2. param passieren oder Sie einfach data() Methode auch wie verwenden:

console.log($('.blue-shape').data("actions")); 
 
$('.blue-shape').data("actions","[{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''}]"); 
 
console.log($('.blue-shape').data("actions"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="blue-shape" 
 
data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>

Answer 3

Sie können Objektstruktur in String verwenden, die eine andere Antwort sagte.

$('.blue-shape').data("actions","[{event:'mouseenter', ... }]"); 

Aber wenn Sie Objekt in der Methode verwenden möchten, können Sie Objekt JSON.stringify() zu konvertieren Zeichenfolge verwenden.

$('.blue-shape').attr("data-actions", JSON.stringify([{ 
 
    event:'mouseenter', 
 
    action:'jumptoslide', 
 
    slide:'rs-16', 
 
    delay:'' 
 
}])); 
 
console.log($('.blue-shape').attr("data-actions"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="blue-shape" 
 
data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>

Answer 4

ich Ihre jquery mit diesem folgenden Code nur aktualisiert bitte überprüfen und wählen, wenn es

$('document').ready(function(){ 
jQuery('.blue-shape').attr("data-actions","[{'event':'mouseenter', 'action':'jumptoslide', 'slide':'rs-16','delay':''}]"); 
}); 

Für Referenz

https://jsfiddle.net/jasonantho/6ehmded3/

Answer 5

funktioniert können Sie eine Funktion als zweites Argument übergeben und Sie können wie einen beliebigen Wert iterieren zu ändern:

jQuery(document).ready(function($) { 
 
    console.log($('.blue-shape').data('actions')); 
 
    
 
    $('.blue-shape').attr("data-actions", function() { 
 
    var arr = $(this).data('actions'), newArr = []; 
 
    $.each(arr, function(i, obj){ 
 
     if(obj.slide === "rs-18"){ 
 
      obj.slide = "rs-16" 
 
     } 
 
     if(i === arr.length-1){ newArr.push(obj); } 
 
    }); 
 
    return newArr; 
 
    }); 
 
    
 
    console.log($('.blue-shape').data('actions')); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="blue-shape" data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'></div>