Как изменить вспомогательный элемент атрибута данных с помощью JQuery

Question

Я хочу изменить вспомогательный элемент ниже данных атрибутов

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

для этого я добавил ниже JQuery код, но он не работает

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

.blue-shape - это имя класса div, в котором я хочу изменить атрибут данных

Answer 1

jQuery.attr() ожидает второй параметр как строку.

посмотреть на jQuery.data() также

$('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

Вам необходимо пройти строку в 2 парам или вы можете просто использовать data() метод тоже нравится:

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

Вы можете использовать структуру объекта в строке, которую сказал другой ответ.

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

Но если вы хотите использовать объект в методе вы можете использовать JSON.stringify() для преобразования объекта в строку.

$('.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

Я только что обновил свой JQuery с этим следующий код, пожалуйста, проверьте и оцените, если он работает

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

ориентировочные

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

Answer 5

Вы можете передать функцию в качестве второго arguement и вы можете перебрать, чтобы изменить любое значение, как:

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>