如何在不分配ID的情况下引用元素？

Genome314 发表于 Dev

基因组314

因此，以下工作有效-但我可以将“ img11”，“ name11”和“ prof11”等引用替换为“ this”这样的东西，这样我每次使用此代码时都不必分配ID吗？

<div onclick="changeStored(img11); changeName(name11); changeProf(prof11) ">
    <div  style="float:left">
        <img id="img11" style="max-height:80px;" src="Pictures/Smiley.png">
    </div>
    <div style="float:left;">
      <p id="name11">Name: Jane Doe</p>
      <p id="prof11">Profession: Something</p>
    </div>
</div>

我将发布功能只是为了完整性：

function changeStored(img){
    storeOnClick = img.src;
    alert(storeOnClick);
}
function changeName(img){
    name = document.getElementById("name11").innerHTML;
    alert(name);
}
function changeProf(img){
    prof = document.getElementById("prof11").innerHTML;
    alert(prof);
}

而且不行，我不能只将onclick事件放在img或p中，因为当用户单击div中的任何位置时，我都需要将所有3个值传递回函数。

网页套件

我认为您可以执行以下操作：

html

<div class="info">
    <div  style="float:left">
        <img class="myimg" style="max-height:80px;" src="Pictures/Smiley.png">
    </div>
    <div style="float:left;">
      <p class="myname">Name: Jane Doe</p>
      <p class="myprof">Profession: Something</p>
    </div>
</div>

js

var _divs = document.querySelectorAll('.info');

function changeAll() {
    for (var i = 0; i < _divs.length; i++) {
        var myimg = _divs[i].querySelector('.myimg'),
            myname = _divs[i].querySelector('.myname'),
            myprof = _divs[i].querySelector('.myprof')

        // img
        var storeOnClick = myimg.src;
        alert(storeOnClick);
        // name
        var name = myname.innerHTML;
        alert(name);
        // profession
        var prof = myprof.innerHTML;
        alert(prof);
    }
}

编辑

要在“点击”上实现此目的：

window.onload = function () {
    var _divs = document.querySelectorAll('.info');
    for (var i = 0; i < _divs.length; i++) {
        _divs[i].addEventListener("click", function () { changeInfo(this) }, false);
    }
}

function changeInfo(el) {
    var myimg = el.querySelector('.myimg'),
        myname = el.querySelector('.myname'),
        myprof = el.querySelector('.myprof')

    // img
    var storeOnClick = myimg.src;
    alert(storeOnClick);
    // name
    var name = myname.innerHTML;
    alert(name);
    // profession
    var prof = myprof.innerHTML;
    alert(prof);

}