动态地将onclick事件分配给for循环内的链接。 **仅限原生Javascript **

Question

我正在上一个介绍性的Javascript课程，我正在处理的任务是通过点击“阅读更多”链接来扩展文字，将链接更改为“少阅读”，并在点击'时收缩文字阅读更少'链接。我差不多完成了，但我有一个问题。包含文本的整个div是'onclick'元素，而不是链接。意思是，无论我在div内部点击什么，都会激活oncl​​ick事件。如何将onclick事件分配给链接而不是整个div？

this.oData = {};

function getData(){
 //mimic ajax request
 return [
   {
     blogID: 0,
     blurb: "blurb 1 sfdasf safs fdsaf asdf asdfa sdf asdf asdf asdfa sdfasd fasdf asdf asdf asdf asdfasdfadsfadsfasdf asdf asdf sdfasd fasd fasdf asdf sadf asdfa sf"
   },
   {
     blogID: 1,
     blurb: "blurb 2 sfdasf safs fdsaf asdf asdfa sdf asdf asdf asdfa sdfasd fasdf asdf asdf asdf asdfasdfadsfadsfasdf asdf asdf sdfasd fasd fasdf asdf sadf asdfa sf"
   },
   {
     blogID: 2,
     blurb: "blurb 3 sfdasf safs fdsaf asdf asdfa sdf asdf asdf asdfa sdfasd fasdf asdf asdf asdf asdfasdfadsfadsfasdf asdf asdf sdfasd fasd fasdf asdf sadf asdfa sf"
   },
   {
     blogID: 3,
     blurb: "blurb 4 sfdasf safs fdsaf asdf asdfa sdf asdf asdf asdfa sdfasd fasdf asdf asdf asdf asdfasdfadsfadsfasdf asdf asdf sdfasd fasd fasdf asdf sadf asdfa sf"
   }
 ];
};

this.oData = getData();

(function injectInitial(){                                      //self-invoking function to inject the initial text into the HTML.
  for(var i=0; i < this.oData.length; i++){
    document.getElementsByTagName("div")[i].innerHTML = this.oData[i].blurb + "...<a href=\"javascript:void(0);\" >Read Less</a>";
    var activeBlurb = document.getElementsByTagName("div")[i];  //set activeBlurb to the div that the for loop is currently on [i]
    activeBlurb.id='blog' + this.oData[i].blogID;               //set the ID for the current div [i], like blog0, blog1, blog2, blog3
    activeBlurb.data = activeBlurb.id;
    // activeBlurb.data = activeBlurb.getElementsByTagName("a");   //set the data attribute of the current div to the info I need to pass(ID of the current div)
    console.log(activeBlurb.data);
    // // console.log(activeBlurb.getElementsByTagName("a"));
    activeBlurb.onclick = function(){                           //set the onclick event to send the ID of the current div(held in this.data) to function toggleMore.
      toggleMore(this.data);
    }
  }
})();

function toggleMore(clicked_id){
  console.log(clicked_id);

  var clickedBlurb = document.getElementById(clicked_id).innerHTML;
  var status = new Boolean(false);
  var snippet = clickedBlurb.slice(-8,-4);

  if (snippet=="Less") {
    status = 'true';
  } else {
    status = 'false';
  }
  injectText(status,clicked_id);
}

function injectText(status, clicked_id) {
    var intHalved;
    var halvedText = "";
    var fullText = "";
    var i = clicked_id.slice(-1);
    fullText = this.oData[i].blurb;
    intHalved = this.oData[i].blurb.length/2;
    halvedText = this.oData[i].blurb.slice(0,intHalved);

    if(status == 'true') { //this is set by the toggleMore function.
      //inject the shortenend text into the innerHTML
      document.getElementsByTagName("div")[i].innerHTML = (halvedText + "...<a href=\"javascript:void(0);\">Read More</a>");
    } else {
      //inject the full-length text into the innerHTML
      document.getElementsByTagName("div")[i].innerHTML = (fullText + "...<a href=\"javascript:void(0);\">Read Less</a>");
    }

    var activeBlurb = document.getElementsByTagName("div")[i];
    activeBlurb.data = activeBlurb.id;                       //set the data attribute of the current div to the info I need to pass(ID of the current div)
    activeBlurb.onclick = function(){                        //set the onclick event to send the ID of the current div(held in this.data) to function toggleMore.
      toggleMore(this.data);
    }
}

Answer 1

使用委托，您可以检查目标是否为列表：

div.addEventListener('click', (e) => if(e.target.matches('li')){...});