如何在不指定ID的情况下引用元素？

Question

因此，以下工作 - 但我可以替换引用＆＃39; img11＆＃39;，＆＃39; name11＆＃39;和＆＃39; prof11＆＃39;喜欢＆＃39;这个＆＃39;所以每次使用此代码时，我都不必分配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个值传递回函数。

Answer 1

我认为你可以这样做：

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);

}

如果您想对页面上的所有信息div执行此操作，您仍然可以使用changeAll（）。

当然在html加载后运行你的j ..