更改“data-image”属性的值

Question

我想使用 switch 和 jquery 在多个 div 中动态显示不同的图像。
我必须在data-image="" 中添加图像。

这是我的代码：

 <div class="tb-image-carte" aria-hidden="true">
    <div data-image="" class="--contain"></div>
 </div>
 <div class="tb-image-carte" aria-hidden="true">
    <div data-image="" class="--contain"></div>
 </div>
 <div class="tb-image-carte" aria-hidden="true">
    <div data-image="" class="--contain"></div>
 </div>

这是我的 javascript 代码：

var imageCarte = $('data-image');
    res.forEach(function(image) {
      switch (image.imageCode) { 
        case "1":
        case "2": 
        imageCarte = "the beach" 
        break
        case "3":
        case "4": 
        imageCarte = "home" 
        break
      }
    });

我想根据条件给每个data-image加一个值

Answer 1

您需要改用 jQuery .data() 方法：

var imageCarte = $('div[data-image]');

res.forEach(function(image) {
  switch (image.imageCode) { 
    case "1":
    case "2": 
        imageCarte.data("image", "the beach");
    break
    case "3":
    case "4": 
        imageCarte.data("image", "home");
    break
  }
});

Answer 2

您可以只使用attr() 函数：

$(".tb-image-carte>div">.attr("data-image","newattrdata");

我建议在图像 div 中添加一个 ID 以避免错误，或者至少在选择类时更加清晰：

<div data-image="" class="--contain" id="image1"></div>

//SO yo can do:
$("#image1").attr("data-image","new Data image");