时间戳

首页 > 解决方案 > 比较对象数组（图像）和跨度标签（图像）

javascript - 比较对象数组（图像）和跨度标签（图像）

问题描述

我想比较对象（图像）和跨度标签（图像）的数组。在按钮上单击我需要检查丢弃的图像和跨度图像是否相等。所以请帮助我。

组件.html：

 <div class="field-box-samp">
        <div class="captchaText">
          <span id="circle_text"><img src="https://www.gstatic.com/webp/galler/1.png"></span>
          <span id="triangle_text"><img src="https://www.gstatic.com/webp/galler/2.png"></span>
          <span id="square_text"><img src="https://www.gstatic.com/webp/galler/3.png"></span>
        </div>
    </div>

组件.ts：

    origin = [{    
    img: 'https://www.gstatic.com/webp/gallery3/1.png'
  },
  {    
      img: 'https://www.gstatic.com/webp/gallery3/2.png'
  },
  {   
      img: 'https://www.gstatic.com/webp/gallery3/3.png'
  }];
  //---------------

  destination = [
  ];
  //--------------- 
  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      let item:any = event.previousContainer.data[event.previousIndex];
      let copy:any = JSON.parse(JSON.stringify(item));
      let element:any = {};
        for(let attr in copy){
          if(attr == 'title'){
            element[attr] = copy[attr] += ' copy';
          }else{
            element[attr] = copy[attr];
          }
        }
      this.destination=[element];
      clearimg()        
    }
   }  
  }

标签： javascriptarraysangulartypescriptobject

解决方案

如果您只想检查现有跨度是否包含您的原始对象中存在的图像。 

// dont use 'origin' it is also an keyword in js
    let originUrl = [{    
        img: 'https://www.gstatic.com/webp/galler/1.png'
      },
      {    
          img: 'https://www.gstatic.com/webp/galler/2.png'
      },
      {   
          img: 'https://www.gstatic.com/webp/galler/3.png'
      }];
    const matchSpanFn = spanID => {
        let isExist = false;
        for (var i in originUrl) {
             if (originUrl[i].img === document.querySelectorAll('#'+spanID+' img')[0].getAttribute('src'))
                isExist = true
        }
        return isExist

        }

    matchSpanFn('circle_text') // here you can pass any id to check with constant node structure as shown above

推荐阅读