Question

嘿我试图创建一个函数来打印出它所调用的元素的id的最后一个字符。在我推进实际计划之前，这只是一个测试，但我被困在这里。我遇到的问题是我收到一个错误，说我的参数未定义＆＃39;，因此没有传递值，或者传递的值不是字符串而是字符串运营（charAt）不会对它起作用。我已经包含了代码。谢谢。

我的网页上有大量的模态图片，点击后会打开幻灯片图片专辑。我得到这个工作1张图像，然后意识到，如果它有一定数量的不确定大小的幻灯片，我应该做一个填充幻灯片div的功能。我计划让每个模态图像的ID为＆＃34; modal-1，modal-2 ......等＆＃34;并且有一堆数组，每个图像的名称相似，并且＃34; slides_1，slides_2 ......等等＃34;如果两者的最后一个字符匹配，那么它将使用数组中的图像填充幻灯片。这种方式如果我需要添加另一个模态图像，我需要做的就是给它适当的id并添加一个图像数组。this is a ,past question which sort of illustrates that larger goal.

HTML：

<body id="modal-2" onload="fillSlides(this.id)">

   <h2 id="title" style="text-align:center"></h2>

  <div class="row">
    <div class="column">
      <img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" onclick="openModal();currentSlide(1);fillSlides(this.id);" class="hover-shadow cursor">
    </div>
  </div>

使用Javascript：

function fillSlides(modalID){
      var slides_1 = ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ]
      var modalI = modalID;
      var lastCharM = modalI.charAt(modalI.length - 1);

       document.getElementById("title").innerHTML = "the last char is" + lastCharM;


    }

Answer 1

load事件实际上是一个window事件，实际上并不是body上的事件，因此this中的onload - 属性样式处理程序文本是window。要访问body，请使用document.body代替this：

<body id="modal-2" onload="fillSlides(document.body.id)">

Live example on JSBin（因为Stack Snippets想为你提供body标记。）

一般情况下，我建议避免使用onxyz - 属性样式的事件处理程序。首先，除了元素上的方法或（有时）它包含元素之外，它们可以调用的唯一函数必须是全局变量，浏览器上的全局命名空间已经非常拥挤。

相反，我建议至少在元素和窗口上使用onxyz 属性。在这种情况下，您的JavaScript代码中会出现这种情况：

window.onload = function() { loadSlides(document.body.id); };

但更好的方法是通过addEventListener使用现代（DOM2 +）事件处理（如果您需要支持过时版本的IE，则回退到Microsoft的专有attachEvent; {{3 }}）：

window.addEventListener("load", function() {
    loadSlides(document.body.id);
};

Answer 2

我会使用数据属性而不是解析字符串来处理此问题。这将允许您在HTML img元素上使用类而不是id，然后通过数据属性确定单击了哪个元素。

<强> HTML

<img data-num="1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" class="hover-shadow cursor img">

<强> JS

var classname = document.getElementsByClassName("img");

var myFunction = function() {
    var attribute = this.dataset.num;
    //attribute has the data-num value
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

我还在JS中绑定click事件而不是内联onclick，以保持关注点的分离（不混合JS和HTML）。

更新，以回应kakamg0的评论：

使用document.querySelectorAll('img[data-num]')将省略使用类进行定位的必要性。

<强> HTML

<img data-num="1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" class="hover-shadow cursor">

<强> JS

var images = document.querySelectorAll('img[data-num]');

var myFunction = function() {
    var attribute = this.dataset.num;
    //attribute has the data-num value
};

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', myFunction, false);
}

Javascript - 无法使用元素ID作为字符串参数？

2 个答案: