Javascript 单击时更改图像和文本值

我有3个变量，如下所示，假设它们是赋值的。 我想做的是，当用户单击div class=“info2”时，将这些变量插入到img类“myimg2”、p类“myname2”和p类“myprof2”中

它必须在该div中，因为我希望用户单击该div上的任意位置来更改所有3个值

这在Javascript中可能吗

脚本：

var storeOnClick, 
    name,
    prof;

HTML

姓名：简·多伊

职业：某种东西

姓名：简·多伊

职业：某种东西

好的，我想我已经知道密码了。我的做法是将事件处理程序附加到页面的

主体。然后在该函数中，我检测您是否单击了
.info
元素（或其子元素之一）。如果您这样做了，那么我将更改该特定
.info
div的值

超重要部件：

// add an event listener to the entire body. I could have iterated through each div with the '.info2' class instead
if (document.body.addEventListener) {
    document.body.addEventListener('click', updateCard, false);
} else {
    document.body.attachEvent('onclick',updateCard); // stupid IE
}


// this is the callback function for the click event handler
function updateCard(e) {
   e = e || window.event;
   var target = e.target || e.srcElement; // more IE stuff

   // does target have an ancestor of .info2 ?
    var el = findAncestor(target, 'info2');
    if (el) {

      // which elements do we want to update? Only the currently clicked on .info2
      var iImg = el.querySelector('.myimg2');
      var iName = el.querySelector('.myname2');
      var iProf = el.querySelector('.myprof2');


      // assign the values a random element from the arrays
      storeOnClick = imgArray[Math.floor(Math.random()*imgArray.length)];
      name = nameArray[Math.floor(Math.random()*nameArray.length)];
      prof = profArray[Math.floor(Math.random()*profArray.length)];


      iImg.src = storeOnClick;
      iName.innerHTML = lblName + name;
      iProf.innerHTML = lblProf + prof;  
   }     
}

// this is similar to jQuery's $.parents('.class')
function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}


为了好玩，以下是jQuery中的内容：

$(function() {
   $('.info2').on("click",function() {
       var t = $(this);
       t.find('.myimg2').attr('src',storeOnClick);
       t.find('.myname2').html(name);
       t.find('.prof2').html(prof);
   });
});

试试这个：

在
info2
中插入新的
onClick
：

<div class="info2" onclick="change_text()">

有点混乱，但是通过这个方法你会更容易理解：）

在本例中，我不能使用Jquery:（但如果这是唯一可能的方法，那么知道表中有多个实体会很有趣，因此我必须能够单独单击它们来更改它们，并为您单独更新：）我无法让它更改表中下一个div的内容，当我将onclick放入下一个div时，它只会更改第一个div的内容：（因为我的函数仅用于第一个div:）
您必须在每个
div
上使用一个函数。这将是相当混乱的，因为它只是改变了第一个div=“info2”，我有多个div=“info2”，表中一个接一个地有12个div=“info2”。这可能与[0]有关吗？是的，当我将[0]更改为[1]时，它只会更改下一个div-有没有办法将[x]更改为div onclick的编号？是的，您必须遍历每个元素。我只是简单地指定了单个的。我将更新演示和代码。实际上，您是想单击第一个div并更新所有具有相同结果的图像，还是想单击第三个div并仅更新您单击的图像？仅更新我单击的一个：）好的，更新了JSFIDLE。它应该适用于任意数量的表元素。
<div class="info2" onclick="change_text()">

function change_text() {
    var text1 = document.getElementById('myname2');
    var text2 = document.getElementById('myprof2');
    var img1 = document.getElementById("myimg2");

    if (text1.innerHTML === "Name: Jane Doe") {
        text1.innerHTML = "test";
    }
    if (text2.innerHTML === "Profession: Something") {
        text2.innerHTML = "test";
    }
    if (img1.src == "link here") {
            img1.src = "link here";
    }
}