Question

我正在尝试建立一个包含多个图像（游戏卡）的页面默认情况下，卡片开始显示背面。当您单击图像时，它会翻转以显示正面。

以下是其中一张图片，以及我如何更改该图片：

<img src="TechBack.png" id="Tech" onclick=diffImageTech(this) />

<script>    
function diffImageTech(img) 
{
   if(img.src.match(/TechBack/)) img.src = "TechFront.png";
   else img.src = "TechBack.png";
}       
</script>

我还想发生的是，如果卡片A已经翻转到正面图像，那么当您单击卡片B时，卡片A将会翻转到背面，卡片B将会翻转到前面图像。

这就是我要通过谷歌搜索工作的目的：

<img src="CelebBack.png" id="CelebBack" onclick=diffImageCelebs(this) />
<img src="TechBack.png" id="TechBack" onclick=diffImageTech(this) />


<script>    
function diffImageCelebs(element) 
{
var a = element.getElementById("CelebBack").item(0);
var b = element.getElementById("TechBack").item(0);

var aa = a.getAttribute("src");
var bb = b.getAttribute("src");

if bb = "TechFront.png" 

{   bb = "TechBack.png";    }

else    {   "TechBack.png"; }

b.setAttribute("src", bb);

if aa = "CelebBack.png";
{ aa = "CelebFront.png"; }
   else {  "CelebBack.png";  }

a.setAttribute("src", aa);

   }        
</script>

有什么想法吗？

Answer 1

您应该存储图像，背面图像src和正面图像src的状态。那么您可以使用一个功能对其进行操作。

sections = []

ngOnInit() {
  this.product = this.route.snapshot.data['product'];
  this.sectionService.getAll(this.product.id).subscribe( sections => {
    this.sections = sections;
  });
}

ngAfterViewInit() {

  const interval = setInterval(() => {
    if (this.sections.length) {
      this.sections.forEach(element => {
        const editor = CKEDITOR.inline('editor' + element.id);
      });
      clearInterval(interval); // stop further executions of this code
    }
  }, 100) // check if sections are ready every 100ms
}

function diffImageTech(img) 
{
   if(img.getAttribute('data-display')=='front'){
      img.setAttribute('data-display', 'back');
      img.setAttribute('src', img.getAttribute('data-back'));
   }
   else {
    img.setAttribute('data-display','front');
      img.setAttribute('src', img.getAttribute('data-front'));
   }
}

使用JavaScript更改多个图像

1 个答案: