Question

所以，我有3个变量，如下所示，假设它们被赋值。我想要做的是将这些变量插入到img class＆＃34; myimg2＆＃34;，p class＆＃34; myname2＆＃34;和p class＆＃34; myprof2＆＃34;当用户点击div class =＆＃34; info2＆＃34;。

时

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

这可以在Javascript中使用吗？

Javscript：

var storeOnClick, 
    name,
    prof;

HTML

<table class="table2" rules="rows">
<tr>
<td>
<div class="info2" onclick="changeStats(this)" >
<div  style="float:left">
<img class="myimg2"style="max-height:80px;" src="Pictures/QuestionMark.png">
</div>
<div style="float:left;">
<p class="myname2">Name: Jane Doe</p>
<p class="myprof2">Profession: Something</p>
</div>
</div>
</td>
<td>
<div class="info2" onclick="changeStats(this)" >
<div  style="float:left">
<img class="myimg2"style="max-height:80px;" src="Pictures/QuestionMark.png">
</div>
<div style="float:left;">
<p class="myname2">Name: Jane Doe</p>
<p class="myprof2">Profession: Something</p>
</div>
</div>
</td>
</tr>
</table>

Answer 1

好的，我想我已经有了代码。我这样做的方法是将事件处理程序附加到页面的body。然后在该函数中，我检测您是否单击了.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;
}

demo

为了好玩，这是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);
   });
});

Answer 2

试试这个：

在onClick中插入新的info2：

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

还要为您的字段将class更改为ID。例如：class="myname2"到id="myname2"

使用Javascript：

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";
    }
}

有点凌乱的方法，但你会更容易从这个方法中理解：）

<强> DEMO

单击更改图像和文本值

2 个答案: