如何向此HTML元素添加两个JavaScript函数

瑞安·罗伯茨(Ryan Roberts)

我正在尝试创建“上一个”和“下一个”按钮,这些按钮在嵌入式Google地图图像上的不同位置之间循环,但是将“上一个”按钮隐藏在第一个位置,并且使“下一个”按钮在最后一个位置消失节目。

我知道添加一个名为“ hidden”的CSS类可以解决问题,但是我不确定将其放置在何处以及如何放置。

这是我的HTML代码。iframe元素是google maps,我为其指定了一个ID“ mappy”,以便在JavaScript中更轻松地选择它。地图下方是两个按钮。

这是我的JavaScript代码。当前,下一个和上一个按钮仅在每个位置之间循环。

var main_map = document.getElementById('mappy');
var maps = [
  'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106094.85581787785!2d-118.22632098885458!3d33.80033081467724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong%20Beach%2C%20CA!5e0!3m2!1sen!2sus!4v1598942170840!5m2!1sen!2sus',
  'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7961373.37326689!2d96.9825121578134!3d13.010860368647212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x304d8df747424db1%3A0x9ed72c880757e802!2sThailand!5e0!3m2!1sen!2sus!4v1598948055475!5m2!1sen!2sus',
  'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12436315.314415561!2d166.3019164867038!3d-40.448493377535335!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d2c200e17779687%3A0xb1d618e2756a4733!2sNew%20Zealand!5e0!3m2!1sen!2sus!4v1598944334239!5m2!1sen!2sus',
  'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29616594.651652496!2d115.15555667021819!3d-25.02365472591425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2b2bfd076787c5df%3A0x538267a1955b1352!2sAustralia!5e0!3m2!1sen!2sus!4v1598944469264!5m2!1sen!2sus'
];
var i = 0; // Current Image Index
var a;

function prev() {
  if (i <= 0) i = maps.length;
  i--;
  return setImg();
}

function next() {
  if (i >= maps.length - 1) i = -1;
  i++;
  return setImg();
}

function setImg() {
  return main_map.setAttribute('src', maps[i]);
}
<p><iframe id="mappy" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106094.85581787785!2d-118.22632098885458!3d33.80033081467724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong%20Beach%2C%20CA!5e0!3m2!1sen!2sus!4v1598942170840!5m2!1sen!2sus"
    width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></p>
<div class="buttons">
  <button class="button" id="prev" onclick="prev()">&larr; Previous</button>
  <button class="button" id="next" onclick="next()">Next &rarr;</button>
</div>

凯维诺

您可以检查索引,如果索引为0,则隐藏上一个按钮,如果索引为4,则隐藏下一个按钮。您可以使用toggleclass隐藏按钮

if (i = 0) { //if index is 0, toggle class hide
  classList.toggle("hide");
else {
  classList.toggle(“show”); //if the index is not 0, toggle class show
}
}
if (i = 4) { //if index is 4, toggle class hide
  classList.toggle("hide");
else {
  classList.toggle(“show”); //if the index is not 4, toggle class show
}
}

编辑:添加了一个嵌套的else语句来切换类显示,如果索引不是0或4。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

添加混合javascript函数,以使内容淡入一列内的另一个内容中/使此功能适用于两个单独的列

来自分类Dev

如何向安装程序添加两个许可协议?

来自分类Dev

如何使用HTML和Javascript向网页添加元素?

来自分类Dev

如何使HTML元素适合其他两个元素?

来自分类Dev

如何使用XMLService向元素添加两个命名空间?

来自分类Dev

如何使此PHP函数生成两个随机字符串而不是一个?

来自分类Dev

使用Javascript匹配两个HTML元素的高度

来自分类Dev

如何通过javascript添加两个变量

来自分类Dev

如何使此函数在两个$ .getJSON函数之后发生?

来自分类Dev

如何获取两个独立标签之间的HTML元素

来自分类Dev

如何使两个元素的类相等时执行的函数?

来自分类Dev

如何一键显示两个Javascript函数

来自分类Dev

如何在JavaScript中添加两个样式元素?

来自分类Dev

如何比较两个异步JavaScript函数的结果?

来自分类Dev

如何向元素添加两个类

来自分类Dev

如何使用javascript更改两个元素的颜色?

来自分类Dev

如何使HTML元素适合其他两个元素?

来自分类Dev

如何使HTML元素适合其他两个元素?

来自分类Dev

如何使用XMLService向元素添加两个命名空间?

来自分类Dev

向UILabel添加两个阴影

来自分类Dev

如何在jquery的.html()中添加两个变量

来自分类Dev

使用Javascript匹配两个HTML元素的高度

来自分类Dev

如何无缝显示两个html元素

来自分类Dev

PyQt4:如何向中央小部件添加两个对象并显示两个视频

来自分类Dev

添加两个元组并对每个元素应用一个函数

来自分类Dev

如何向附加元素添加函数

来自分类Dev

如何使用 vanilla javascript 将 HTML 附加到两个相似的元素?

来自分类Dev

向 QComboBox 添加两个变量

来自分类Dev

在javascript中添加两个或多个函数

Related 相关文章

  1. 1

    添加混合javascript函数,以使内容淡入一列内的另一个内容中/使此功能适用于两个单独的列

  2. 2

    如何向安装程序添加两个许可协议?

  3. 3

    如何使用HTML和Javascript向网页添加元素?

  4. 4

    如何使HTML元素适合其他两个元素?

  5. 5

    如何使用XMLService向元素添加两个命名空间?

  6. 6

    如何使此PHP函数生成两个随机字符串而不是一个?

  7. 7

    使用Javascript匹配两个HTML元素的高度

  8. 8

    如何通过javascript添加两个变量

  9. 9

    如何使此函数在两个$ .getJSON函数之后发生?

  10. 10

    如何获取两个独立标签之间的HTML元素

  11. 11

    如何使两个元素的类相等时执行的函数?

  12. 12

    如何一键显示两个Javascript函数

  13. 13

    如何在JavaScript中添加两个样式元素?

  14. 14

    如何比较两个异步JavaScript函数的结果?

  15. 15

    如何向元素添加两个类

  16. 16

    如何使用javascript更改两个元素的颜色?

  17. 17

    如何使HTML元素适合其他两个元素?

  18. 18

    如何使HTML元素适合其他两个元素?

  19. 19

    如何使用XMLService向元素添加两个命名空间?

  20. 20

    向UILabel添加两个阴影

  21. 21

    如何在jquery的.html()中添加两个变量

  22. 22

    使用Javascript匹配两个HTML元素的高度

  23. 23

    如何无缝显示两个html元素

  24. 24

    PyQt4:如何向中央小部件添加两个对象并显示两个视频

  25. 25

    添加两个元组并对每个元素应用一个函数

  26. 26

    如何向附加元素添加函数

  27. 27

    如何使用 vanilla javascript 将 HTML 附加到两个相似的元素?

  28. 28

    向 QComboBox 添加两个变量

  29. 29

    在javascript中添加两个或多个函数

热门标签

归档