Блог

Итак, у меня есть 3 переменные, как показано ниже, предположим, что им присвоены значения. Что я хочу сделать, так это вставить эти переменные в класс img «myimg2», p-класс «myname2» и p-класс «myprof2″, когда пользователь нажимает div class =»info2».

Это должно быть в этом 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>
  

Хорошо, я думаю, что у меня есть код. Способ, которым я это делаю, заключается в прикреплении обработчика событий к 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) amp;amp; !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);
   });
});
  

Попробуйте это:

Вставьте новое 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";
    }
}
  

Довольно запутанный метод, но вам будет легче понять этот метод 🙂

ДЕМОНСТРАЦИЯ