javascript - jQuery 在转换结束时更改 id

Question

我有一个简短的 jQuery 函数，负责更改背景。问题是，如果我再次单击该按钮，它只会跳过整个过渡并开始下一个过渡。我在这里要做的是更改按钮 ID 直到过渡结束，这样用户就无法跳过它。

JS

function changeBackground(div, arrowLeft, arrowRight, array, i){
  $(arrowLeft).attr("id", "#arrow-left-wait");
  $(arrowRight).attr("id", "#arrow-right-wait");
  $(div).css("background-image", `url(img/${backgrounds[i]})`);
  $(div).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
  function(){
    $("#arrow-left-wait").attr("id", arrowLeft);
    $("#arrow-right-wait").attr("id", arrowRight);
  });
  return;
}

CSS

.text{
  min-height: 500px;
  background-image: url("../img/background_1.jpg");
  background-size: cover;
  text-align: center;
  color: white;
  transition: background-image 1500ms ease-in;
  -webkit-transition: background-image 1500ms ease-in;
  -ms-transition: background-image 1500ms ease-in;;
}

Answer 1

为此您甚至不需要 jQuery，只需将以下代码添加到您的文件中的 <script> 中元素:

document.getElementById('this').id = 'changed';

<div id="this">
</div>

这将更改 <div id="this"> 的 ID至 <div id="changed"> !

询问您是否需要更详尽的解释，如果需要，我可以将其发布在我的网站上。

JBDouble05