如何使用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(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> 

Answer 2

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 3

您需要在第二個參數中傳遞字符串，或者也可以像下面這樣簡單地使用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 4

我剛剛使用以下代碼更新了您的jquery，請檢查並投票是否有效

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

以供參考

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