javascript - 在Javascript中将句子作为元素放入数组中，这可能吗？

Question

当我单击“上一个”或“下一个”时，我尝试使用下图更改句子。 首先，我可以像这样将句子作为元素放入数组中吗？

var content = new Array("Big sale!","Children's Day-Special Sale",
"Buy here","Click here to sign up");

HTML

<table>
  <tbody>
  <tr>
    <td><span onclick="previousImg()">pre</span></td>
    <td><img id="slideImage" src="img/promotion1.jpg"></td>
    <td><span onclick="nextImg()">next</span></td>
  </tr>
  <tr>
    <td colspan="3"><span id="information">information of the Image</td>
  </tr>
</tbody>
</table>

Javascript

  var images =  new Array("img/promotion1.jpg", "img/promotion2.png",
              "img/promotion3.jpg", "img/promotion4.jpg");


  var content = new Array("Big sale!","Children's Day-Special Sale",
                "Buy here","Click here to sign up");

  var image = document.getElementById("slideImage");
  var string = document.getElementById("information");
  var imgNumber=1;
  var numberOfImg = images.length;

  function previousImg(){
      if(imgNumber > 1){
        imgNumber--;
        }
      else{
        imgNumber = numberOfImg;
      }
      var preText = content[imgNumber-1];
    image.src = images[imgNumber-1];
    string.innerHTML = preText;
    }

  function nextImg(){
    if(imgNumber < numberOfImg){
      imgNumber++;
      }
    else{
      imgNumber = 1;
      }
      var nextText = content[imgNumber-1];
    image.src = images[imgNumber-1];
    string.innerHTML = nextText;
    }

我想要“大促销!”拿出img/promotion1.jpg，“Children's-”与img/promotion2.png同时变化。

帮助我...谢谢!

Answer 1

我冒昧地重写了您的代码以包含一些最佳实践。

首先是代码:

CSS

.nav-button {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

HTML

<table>
  <tbody>
  <tr>
    <td><button class="nav-button" onclick="previousImg()">pre</button></td>
    <td><img id="slideImage"></td>
    <td><button class="nav-button" onclick="nextImg()">next</button></td>
  </tr>
  <tr>
    <td colspan="3"><span id="information"></td>
  </tr>
</tbody>
</table>

JavaScript

var items = [
  {img: "img/promotion1.jpg", text: "Big sale!"},
  {img: "img/promotion2.png", text: "Children's Day-Special Sale"},
  {img: "img/promotion3.jpg", text: "Buy here"},
  {img: "img/promotion4.jpg", text: "Click here to sign up"}
];

var imageEl = document.getElementById("slideImage");
var infoEl = document.getElementById("information");
var itemNumber = 0;
var numberOfItems = items.length;

function setInfo() {
  var item = items[itemNumber];
  imageEl.src = item.img;
  infoEl.innerHTML = item.text;
}

function previousImg() {
  itemNumber--;
  if (itemNumber < 0) {
    itemNumber = numberOfItems-1;
  }
  setInfo();
}

function nextImg(){
  itemNumber++;
  if(itemNumber === numberOfItems) {
    itemNumber = 0;
  }
  setInfo();
}

setInfo();

现在解释一下:

我将你的图像信息和文本信息组合成一个对象数组。这允许您将数据保存在 block 中，而不是保存在不同的数组中。

我从 new Array() 转换而来使用 []和{}对于 new Object() .

我改变你的<span>与 onclick至<button>标签更好地符合屏幕阅读器，更好地支持盲人。我还添加了一些 CSS 来制作 <button>看起来不像按钮。这取决于您希望它们看起来如何。

我将代码分解为将图像和文本设置为单个函数，并从其他函数调用它以减少重复的代码。我调用该函数一次，将原始图像和文本设置到页面中。

我将您的 prev 和 next 函数中的逻辑更改为更简单。