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");

更改“数据图像”属性的值

2 个答案: