为页面的每个 class link 打开一个弹出窗口 not works inputs[i] is undefined 我该如何解决？

Question

这是我的代码我正在尝试使用 class 和

打开页面的所有链接

.getAttribute('href') ans setimeout 但我的代码不起作用我做错了什么

请帮帮我

function newWindow(url)  {

 var inputs = document.getElementsByClassName('myclass');
 i=1

 MT=8000*i;MT1=8000*i+8000;
 win = window.open(url1, '1366002941508','height=250,width=234,left=0,top=0,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no') ;

 for (var i=0; i<inputs.length; i++) {
      setTimeout(function(){

           win.close(); 
           inputs = document.getElementsByClassName('myclass'); 
           url1=  inputs[i].getAttribute('href'); 
           MT=8000*i;MT1=8000*i+8000;
           win = window.open(url1, '1366002941508','height=250,width=234,left=0,top=0,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no') ;

      }, 7000*i);
 }
};

Answer 1

test1()会失败，因为当setTimeout()运行时，索引(i)已经达到4（查询的元素长度——用arrays/lists 从 0 开始意味着它没有任何目标）。

test2() 是一种更常见的方法——您将元素传递给另一个函数，然后在该函数中它会被记住，并且可以在超时执行时进行查询

test3() 正在使用较新的 ES6 内容。使用 let 变量声明似乎可以在超时为运行.

时保留其状态

test4() 是递归函数的示例，它将调用 callTest() 函数，每次点击之间都有延迟。

const tests = document.getElementsByClassName('test');

function test1(){
  // will fail
  console.log( 'test 1 called ... ' );
  for( var i=0, x=tests.length; i<x; i++ ){
    setTimeout( function(){
      console.log( i );
      console.log( tests[i].getAttribute('data-test') );
    }, 3000 );
  }
}

function test2(){
  // common pattern
  console.log( 'test 2 called ... ' );
  for( var i=0, x=tests.length; i<x; i++ ){
    parseInfo( tests[i] );
  }
  function parseInfo( element ){
    setTimeout( function(){
      console.log( element.getAttribute('data-test') );
    }, 3000 )
  }
}

function test3(){
  // fun with ES6
  console.log( 'test 3 called ...' );
  for( let test of tests ){
    setTimeout( ()=>{
      console.log( test.getAttribute('data-test') );
    }, 3000 );  
  }
}

function test4(){
  // delay the call of each console by n seconds...
  console.log( 'test 4 called...' );
  delayCall( 0 );
  function callTest( element ){
    console.log( element.getAttribute('data-test') );
  }
  function delayCall( index ){
    setTimeout(()=>{
      callTest( tests[index] );
      if( index < tests.length - 1 ){
        index++;
        delayCall( index );
      }
    }, 3000 );
  }
}

<div class="test" data-test="one"></div>
<div class="test" data-test="two"></div>
<div class="test" data-test="three"></div>
<div class="test" data-test="four"></div>

<button onclick="test1()">TEST 1</button>
<button onclick="test2()">TEST 2</button>
<button onclick="test3()">TEST 3</button>
<button onclick="test4()">TEST 4</button>

为页面的每个 class link 打开一个弹出窗口 not works inputs[i] is undefined 我该如何解决？

open a popup for each class link of page not works inputs[i] is undefined how I could solve?

html

javascript

popup