点击对应栏实现输出对应栏数字的三种方法_加一行样式实现点击对应单选框内显示对应数字的功能-CSDN博客

本文链接：https://blog.csdn.net/weixin_41905935/article/details/79933260

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  style 
  > 
 
 
  * { 
 
 
  padding: 
  0; 
 
 
  margin: 
  0; 
 
 
  list-style: 
  none; 
 

   } 
 

 
  li { 
 
 
  background: 
  hotpink; 
 
 
  width: 
  200px; 
 
 
  height: 
  30px; 
 
 
  line-height: 
  30px; 
 
 
  border: 
  1px 
  solid 
  #000; 
 
 
  text-align: 
  center; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 

 
  < 
  body 
  > 
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
  class= 
  "li" 
  > 
 

   1 
 
 
  </ 
  li 
  > 
 
 
  < 
  li 
  class= 
  "li" 
  > 
 

   2 
 
 
  </ 
  li 
  > 
 
 
  < 
  li 
  class= 
  "li" 
  > 
 

   3 
 
 
  </ 
  li 
  > 
 
 
  < 
  li 
  class= 
  "li" 
  > 
 

   4 
 
 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  </ 
  body 
  > 
 
 
  < 
  script 
  > 
 
 
  // 方法1：使用let 
 
 
  // 1获取到目标元素 
 
 
  var 
  a = 
  document. 
  getElementsByTagName( 
  "li"); 
 
 
  // 2使用let声明 
 
 
  for ( 
  let 
  i = 
  0; 
  i < 
  a. 
  length; 
  i++) { 
 
 
  a[ 
  i]. 
  onclick = 
  function () { 
 
 
  console. 
  log( 
  i + 
  1); 
 

   } 
 

   } 
 

 
  // 方法2：使用闭包方法 
 
 
  // 2使用闭包的方法（函数里面包函数） 
 
 
  function 
  bibao( 
  i) { 
 
 
  var 
  c = 
  function ( 
  e) { 
 
 
  console. 
  log( 
  i + 
  1); 
 

   } 
 
 
  return 
  c; 
 

   } 
 
 
  // 1获取目标元素 
 
 
  var 
  a = 
  document. 
  getElementsByTagName( 
  "li"); 
 
 
  for ( 
  var 
  i = 
  0; 
  i < 
  a. 
  length; 
  i++) { 
 
 
  a[ 
  i]. 
  onclick = 
  bibao( 
  i); 
 

   } 
 
 // 方法3：使用JQ的方法
 
   var 
   a = 
   document. 
   getElementsByTagName( 
   "li"); 
  
 
   $( 
   a). 
   each( 
   function( 
   index, 
   element){ 
  
 
   $( 
   this). 
   on( 
   "click", 
   function(){ 
  
 
   console. 
   log( 
   index+1); 
  

    }) 
  

    }) 
  

 
  < 
  / 
  script 
  > 
 

 
  </ 
  html 
  > 
 