从Javascript中的字符串，整数和函数参数创建类名？

时间：2018-04-17 14:41:47

标签： javascript concatenation 

function imageNext(Class) {

  for (i = 1; i < 7; i++) {
    document.querySelector(Class + "image" + i).style.display = "none";
    document.querySelector(Class + "image" + (i + 1)).style.display = "block";
  }
  if (i > 7) {
    document.querySelector(Class + "image1").style.display = "block";
  }

}

function imagePrev(Class) {
  for (i = 1; i < 7; i++) {
    document.querySelector(Class + "image" + i).style.display = "none";
    document.querySelector(Class + "image" + (i - 1)).style.display = "block";
  }
  if (i < 1) {
    document.querySelector(Class + "image7").style.display = "block";
  }

}
<div class="container">

  <img class="SAimage1" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756508_1743696655674610_7179458580676129491_o.jpg?_nc_cat=0&oh=f16a2edf4ee735e66b6dab095b7fb43c&oe=5B6B32B3" alt="Tom Dining" style="display: block;">
  <img class="SAimage2" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26758659_1743696569007952_4447096103197624856_o.jpg?_nc_cat=0&oh=a7f015a6709fa9a26f06b07fe9782999&oe=5B6A180E" alt="Me Chilling" style="display: none;">
  <img class="SAimage3" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678421_1743695449008064_7298258449829506874_o.jpg?_nc_cat=0&oh=d8fb71ad599a0a630f4d118c1d8be6ca&oe=5B6E0AFD" alt="The Road" style="display: none;">
  <img class="SAimage4" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678110_1743696009008008_4042393389305650172_o.jpg?_nc_cat=0&oh=7d6afafd399c4a2d5d8f0747d59d8353&oe=5B73557C" alt="Night Van" style="display: none;">
  <img class="SAimage5" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756324_1743697449007864_8430059194945119796_o.jpg?_nc_cat=0&oh=5c93856d22087dbf550fc98dfd7a79ce&oe=5B5FBF15" alt="" style="display: none;">
  <img class="SAimage6" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF" alt="" style="display: none;">
  <img class="SAimage7" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF" alt="" style="display: none;">
  <!-- Next/previous controls -->
  <button id="prev" onClick="imagePrev('SA')">&#10094;</button>
  <button id="next" onClick="imageNext('SA')">&#10095;</button>
</div>

我正在尝试创建2个单独的函数，这些函数将隐藏当前图像并显示下一个/上一个图像。这些函数有一些参数，希望它们能够在被调用时对不同的元素起作用（我正在练习制作具有广泛范围和可重用性的函数！）。我相信问题是试图将参数Class与字符串和整数i组合成一个新类，它将采用“Classimage（number）”形式。尝试从这些部分形成新字符串时，正确的语法是什么？

1 个答案:

答案 0 :(得分：0)

这可以大大简化。有很多方法可以实现这一点 - 但是保持代码与现有代码接近，您只需循环遍历所有7个可能的图像，并根据它是否为block或none进行设置。目前的形象。

您需要使用全局变量跟踪“当前”图像的内容。

var currentImage = 1;

function updateImage(Class, selectedImage) {
  currentImage = selectedImage;
  for (var i = 1; i <= 7; i++) {
    document.querySelector("." + Class + "image" + i).style.display = (i === selectedImage ? "block" : "none");
  }
}

function imageNext(Class) {
  var nextIndex = currentImage+1;
  if(nextIndex>7) nextIndex = 1;
  updateImage(Class, nextIndex)

}

function imagePrev(Class) {
 
  var nextIndex = currentImage-1;
  if(nextIndex<1) nextIndex = 7;
  updateImage(Class, nextIndex)

}
<div class="container">

  <img class="SAimage1" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756508_1743696655674610_7179458580676129491_o.jpg?_nc_cat=0&oh=f16a2edf4ee735e66b6dab095b7fb43c&oe=5B6B32B3" alt="Tom Dining" style="display: block;">
  <img class="SAimage2" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26758659_1743696569007952_4447096103197624856_o.jpg?_nc_cat=0&oh=a7f015a6709fa9a26f06b07fe9782999&oe=5B6A180E" alt="Me Chilling" style="display: none;">
  <img class="SAimage3" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678421_1743695449008064_7298258449829506874_o.jpg?_nc_cat=0&oh=d8fb71ad599a0a630f4d118c1d8be6ca&oe=5B6E0AFD" alt="The Road" style="display: none;">
  <img class="SAimage4" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678110_1743696009008008_4042393389305650172_o.jpg?_nc_cat=0&oh=7d6afafd399c4a2d5d8f0747d59d8353&oe=5B73557C" alt="Night Van" style="display: none;">
  <img class="SAimage5" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756324_1743697449007864_8430059194945119796_o.jpg?_nc_cat=0&oh=5c93856d22087dbf550fc98dfd7a79ce&oe=5B5FBF15" alt="" style="display: none;">
  <img class="SAimage6" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF" alt="" style="display: none;">
  <img class="SAimage7" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF" alt="" style="display: none;">
  <!-- Next/previous controls -->
  <button id="prev" onClick="imagePrev('SA')">&#10094;</button>
  <button id="next" onClick="imageNext('SA')">&#10095;</button>
</div>

如果你想让它更可重复使用，不需要你硬编码图像的长度，也没有当前页面的全局变量，给它们所有相同的类，并按照下面的方式进行。

function imageNext(Class){
   var elems = document.querySelectorAll("." + Class);
   var index = Array.from(elems).findIndex(function(e){
      return e.style.display == "block";
   });
   var newIndex = index+1;
   if(newIndex == elems.length-1)
       newIndex = 0;
   elems[index].style.display = "none";
   elems[newIndex].style.display = "block";
}

function imagePrev(Class){
   var elems = document.querySelectorAll("." + Class);
   var index = Array.from(elems).findIndex(function(e){
      return e.style.display == "block";
   });
   var newIndex = index-1;
   if(newIndex == -1)
       newIndex = elems.length-1;
   elems[index].style.display = "none";
   elems[newIndex].style.display = "block";
}
<div class="container">

  <img class="SA" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756508_1743696655674610_7179458580676129491_o.jpg?_nc_cat=0&oh=f16a2edf4ee735e66b6dab095b7fb43c&oe=5B6B32B3" alt="Tom Dining" style="display: block;">
  <img class="SA" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26758659_1743696569007952_4447096103197624856_o.jpg?_nc_cat=0&oh=a7f015a6709fa9a26f06b07fe9782999&oe=5B6A180E" alt="Me Chilling" style="display: none;">
  <img class="SA" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678421_1743695449008064_7298258449829506874_o.jpg?_nc_cat=0&oh=d8fb71ad599a0a630f4d118c1d8be6ca&oe=5B6E0AFD" alt="The Road" style="display: none;">
  <img class="SA" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678110_1743696009008008_4042393389305650172_o.jpg?_nc_cat=0&oh=7d6afafd399c4a2d5d8f0747d59d8353&oe=5B73557C" alt="Night Van" style="display: none;">
  <img class="SA" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756324_1743697449007864_8430059194945119796_o.jpg?_nc_cat=0&oh=5c93856d22087dbf550fc98dfd7a79ce&oe=5B5FBF15" alt="" style="display: none;">
  <img class="SA" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF" alt="" style="display: none;">
  <img class="SA" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF" alt="" style="display: none;">
  <!-- Next/previous controls -->
  <button id="prev" onClick="imagePrev('SA')">&#10094;</button>
  <button id="next" onClick="imageNext('SA')">&#10095;</button>
</div>

相关问题
最新问题