web做题记录 之 模拟2-拼出一个未来

知识点：js交换img的属性，属性设置。 在web模拟二期中题目-拼出一个未来中。解答代码如下：

function isSorted(nums) {
  for (var i = 1; i < nums.length; i++) {
    if (nums[i] < nums[i - 1]) {
      return false;
    }
  }
  return true;
}

if (draggedPiece !== this) {
    // TODO：待补充代码 
    event.preventDefault();
    event.stopPropagation();
    let draimg  = draggedPiece.querySelector('img');
    let thisimg  = this.querySelector('img')
    let srcd = draimg.src;
    let srct = thisimg.src;
    let dataid = draimg.getAttribute("data-id")
    let datait = thisimg.getAttribute("data-id")
    draimg.src = srct;
    thisimg.src = srcd;
    draimg.setAttribute('data-id',datait);
    thisimg.setAttribute('data-id',dataid);//设置属性，一开始不知道这样用
    console.log(this,draimg,srcd,srct,dataid,datait)
    const imgs = document.querySelectorAll('.puzzle-piece img')
    let nums = []
    imgs.forEach(img=>{
        nums.push(img.dataset.id)
    })
    successMessage.className = "show"
    console.log(imgs,nums)
    if(isSorted(nums)){
        successMessage.className = "show"
        console.log("成功")
    }else{
        successMessage.className = "hide"
    }
}

思考一，为什么对于img自带的src属性可以.获取，而data-id属性需要用getAttribute获取呢？以下是chatgpt给的回答： 在 JavaScript 中，DOM 元素的属性可以直接通过点号来访问，比如 src。这是因为 src 是元素的一个属性，所以可以直接通过 .src 来获取其对应的属性值。

而对于自定义属性（比如 data-id），虽然也可以通过点号来访问，但通常更推荐使用 getAttribute() 方法来获取。这是因为自定义属性不属于 DOM 元素的标准属性，为了保证兼容性和准确性，最好使用 getAttribute() 方法来获取自定义属性的值。

因此，尽管在某些情况下使用点号访问自定义属性也可以成功，但为了避免潜在的问题，最好还是使用 getAttribute() 方法来获取自定义属性的值。

交换属性时别人代码：

[draggedPiece.querySelector('img').src, this.querySelector('img').src] = [this.querySelector('img').src, draggedPiece.querySelector('img').src]; 
[draggedPiece.querySelector('img').dataset.id, this.querySelector('img').dataset.id] = [this.querySelector('img').dataset.id, draggedPiece.querySelector('img').dataset.id];

在判断数组是否从小到大排序时，别人的代码：

puzzleArray.forEach((key,index)=>{
    const id=parseInt(key.querySelector('img').dataset.id)
    if(id !== index+1){
        flag=false
    }
});