替换属性 data-image-src 的值答案

【问题标题】：Replace the value of attribute data-image-src替换属性 data-image-src 的值
【发布时间】：2021-06-11 18:23:15
【问题描述】：

我正在尝试更改属性data-image-src 的值，该属性用于div 标记，如下所示：-

<div class="bg-image cover-bg"  id="mobile-app"  data-image-src="assets/img/slider-4.jpg" data-overlay="4"></div>

我需要通过单击由<a> 标签制作的按钮将data-image-src 的值从“assets/img/slider-4.jpg”更改为“assets/img/vs-app.jpg”。

【问题讨论】：

告诉我们你尝试了什么？

标签： java jquery html css

【解决方案1】：

您可以像下面这样获取和设置您的数据属性。

$('a').click(function(e) {
  $('.bg-image').data('image-src', 'assets/img/vs-app.jpg');
  console.log($('.bg-image').data('image-src'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-image cover-bg" id="mobile-app" data-image-src="assets/img/slider-4.jpg" data-overlay="4">1234</div>

<a href='#'>Click to change<a/>

【讨论】：

【解决方案2】：

我建议使用attr()，因为它与 IE 兼容。详情here.

$("#click").on("click", function() {
  $("#mobile-app").attr("data-image-src", "assets/img/vs-app.jpg");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-image cover-bg"  id="mobile-app"  data-image-src="assets/img/slider-4.jpg" data-overlay="4"></div>
<a id="click" href="#">Click</a>

【讨论】：

【解决方案3】：

你可以试试这个

<a href='http://www.test.com' onclick='return change()'>change</a>

<script type='text/javascript'>

function change()
{
    //Change the value of data-image-src here
    return false;
}
</script>

【讨论】：