如何使用jquery更改html元素属性的内部值

Question

我有以下HTML

<div class="badgeSignUp" value="{'component':'LP-Popup', 'flowType':'f', 'category': 'SM-Flight-HP', 'campaignId' : '5'}">

我想改变＆＃34;类别＆＃34;的价值使用jquery。

如何以最佳方式执行此操作？

Answer 1

尝试调整html以在单引号value中设置''属性，在双引号中设置value的属性""

<div class="badgeSignUp" value='{"component":"LP-Popup", "flowType":"f", "category": "SM-Flight-HP", "campaignId" : "5"}'>

利用.attr(function(attributeName, function))进行解析，设置category attr属性的值，返回设置为attr的{​​{1}}

＆＃13;

＆＃13;

.badgeSignUp

＆＃13;

$(".badgeSignUp").attr("value", function(i, value) {
  var data = JSON.parse(value);
  // set `category` property of `data`
  data.category = "abc123";
  console.log(data);
  return JSON.stringify(data);
});

console.log($(".badgeSignUp").attr("value"));

＆＃13;

＆＃13;

＆＃13;

  

无法更改html

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="badgeSignUp" value='{"component":"LP-Popup", "flowType":"f", "category": "SM-Flight-HP", "campaignId" : "5"}'></div>

＆＃13;

$(".badgeSignUp").attr("value", function(i, value) {
  return value.replace(/('category': 'SM-Flight-HP')/, "'category': 'abc123'")
});

console.log($(".badgeSignUp").attr("value"));

＆＃13;

＆＃13;

＆＃13;