[英]How to find an element in HTML string and change an attribute using jQuery
[英]How to change sub element of data attribute using jquery
我想更改以下数据属性的子元素
<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类名称
您可以将函数作为第二个论点进行传递,并且可以迭代以更改任何值,例如:
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>
jQuery.attr()
期望第二个参数为字符串。
$('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>
您需要在第二个参数中传递字符串,或者也可以像下面这样简单地使用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":""}]'>
我刚刚使用以下代码更新了您的jquery,请检查并投票是否有效
$('document').ready(function(){
jQuery('.blue-shape').attr("data-actions","[{'event':'mouseenter', 'action':'jumptoslide', 'slide':'rs-16','delay':''}]");
});
以供参考
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.