带有数组的 JavaScript 导航

我正在尝试使用数组数据进行导航，以破坏div的背景。

它不像我想要的那样工作。

我正在尝试使用具有"点击"功能的addEventListener内部if。

  
var designNextBg = document.getElementById('js-nextbg');
var designBg = document.getElementById('js-designBg');
var designBgArray = [
  'url(images/ipb.png)',
  'url(images/ipg.png)',
  'url(images/ipr.png)',
  'url(images/ipw.png)',
  'url(images/ipy.png)'
];
var positionBg = document.getElementById('js-positionBg');
var i = 0;
designNextBg.addEventListener('click', function(e) {
  if (i = 0) {
    designBg.style.backgroundImage = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else if (i = 4) {
    designBg.style.backgroundImage = designBgArray[i];
    i = 0;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else {
    designBg.style.backgroundImage = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  };
});

<div id="js-designBg" class="design-bg">
  <div class="design-navigation">
    <span id="js-positionBg">01/05</span>
    <p>
      <a id="js-prevbg" class="angle-buttons"><i class="fa fa-angle-left"></i></a>
      <a id="js-nextbg" class="angle-buttons"><i class="fa fa-angle-right"></i></a>
    </p>
  </div>
</div>

你的代码很复杂。我添加了两种方法来处理i并将其保持在范围内。这一次，您可以在点击处理程序(当前已注释掉(中执行此操作，或者您可以在那里连续递增/递减并使用单行计算数组内的实际索引。

var designBg = document.getElementById('js-designBg');
var designBgArray = [
  'url(images/ipb.png)',
  'url(images/ipg.png)',
  'url(images/ipr.png)',
  'url(images/ipw.png)',
  'url(images/ipy.png)'
];
var positionBg = document.getElementById('js-positionBg');
var i = 0;
var nextButton = document.getElementById('js-nextbg');
var prevButton = document.getElementById('js-prevbg');
nextButton.addEventListener('click', function(e) {
  //if(++i === designBgArray.length) i=0;
  ++i;
  updateView();
});
prevButton.addEventListener('click', function(e) {
  //if(--i < 0) i += designBgArray.length;
  --i;
  updateView();
});
function lz(nr){//a simple leading zero function
  return String(nr).padStart(2, 0);
}
funciton updateView(){
  var len = designBgArray.length;
  //get i back into the boundaries
  //you could also take care of that in the click-handler
  //but this way, it's all in one place
  var index = i%len + (i<0? len: 0);
  
  designBg.style.backgroundImage = designBgArray[index];
  positionBg.textContent = lz(index+1) + "/" + lz(len);
}

<div id="js-designBg" class="design-bg">
  <div class="design-navigation">
    <span id="js-positionBg">01/05</span>
    <p>
      <a id="js-prevbg" class="angle-buttons"><i class="fa fa-angle-left"></i></a>
      <a id="js-nextbg" class="angle-buttons"><i class="fa fa-angle-right"></i></a>
    </p>
  </div>
</div>

此代码适用于"下一步"按钮，可根据要求更改背景颜色替换背景图像

  
var designNextBg = document.getElementById('js-nextbg');
var designBg = document.getElementById('js-designBg');
   var designBgArray = [
  'red',
  'green',
  'blue',
  'yellow',
  'cyan'
];    var positionBg = document.getElementById('js-positionBg');
var i = 0;
designNextBg.addEventListener('click', function(e) {
  if (i == 0) {
    designBg.style.background = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else if (i == 4) {
    designBg.style.background = designBgArray[i];
    i = 0;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else {
    designBg.style.background = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  };
});

<div id="js-designBg" class="design-bg">
  <div class="design-navigation">
    <span id="js-positionBg">01/05</span>
    <p>
    
      <input type ='button' value ='NEXT' id="js-nextbg" class="angle-buttons">
    </p>
  </div>
</div>

designNextBg.addEventListener('click', function(e) {
  if (i = 0) {
    designBg.style.backgroundImage = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else if (i = 4) {
    designBg.style.backgroundImage = designBgArray[i];
    i = 0;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  } else {
    designBg.style.backgroundImage = designBgArray[i];
    i = i + 1;
    positionBg.innerHTML = "0" + (i + 1) + "/05";
    return i;
  };
});

在这里，在

if里面，你必须给出==或===进行比较。 = 表示始终返回 true 的赋值运算符。因此，i=0返回true并且始终传递第一个条件。所以它返回1.所以它将跨度更改为 01/05 .

考虑到您的代码和托马斯发布的答案，我将提供一个工作示例，而不是空白屏幕和不存在的背景。

引入了一些小的代码改进，以便于阅读、服务逻辑隔离和更少的字母。

/**
 * List of random images
 * @type {Array}
 */
var designBgArray = [
  'https://picsum.photos/200/300',
  'https://picsum.photos/201/300',
  'https://picsum.photos/202/300',
  'https://picsum.photos/203/300',
  'https://picsum.photos/204/300'
];
var getEl = function(id) {
    return document.getElementById(id);
  },
  addClick = function(el, fn) {
    el.addEventListener('click', fn);
  },
  lz = function(nr) {
    return String(nr).padStart(2, 0);
  };
var designBg = getEl('js-designBg'),
  positionBg = getEl('js-positionBg'),
  nextButton = getEl('js-nextbg'),
  prevButton = getEl('js-prevbg');
var render = function() {
  var len = designBgArray.length,
    index = i % len + (i < 0 ? len : 0);
  console.log('Rendering "i"', i);
  designBg.style.backgroundImage = 'url('+designBgArray[index]+')';
  positionBg.textContent = lz(index+1) + "/" + lz(len);
};
var i = 0;
render(); // Initial background set (if blank bg is not applicable)
addClick(nextButton, function(e) {
  i++;
  if (i === designBgArray.length + 1) {
    i = 0;
  }
  render();
});
addClick(prevButton, function(e) {
  i--;
  if (i < 1) {
    i = designBgArray.length;
  }
  render();
});

.angle-buttons, #js-positionBg {
  background-color: white;
}

<div id="js-designBg" class="design-bg">
  <div class="design-navigation">
    <span id="js-positionBg">01/05</span>
    <p>
      <a id="js-prevbg" class="angle-buttons">&lt;</a>
      <a id="js-nextbg" class="angle-buttons">&gt;</a>
    </p>
  </div>
</div>

相关内容

最新更新

热门标签：