在几个元素上模拟onclick事件



我需要解决一个模拟用户现场动作的小问题:在<select>中选择某个<option>标签,然后模仿按下按钮"OK";。有几行带有<select>标记,所以我决定用jQuery在for循环中执行。但这段代码只在第一次迭代中有效(但效果很好——数字变化,然后显示警报("good-good"))。

有趣的是,循环仍在继续,变量"option"one_answers"select"按原样分配,甚至第二个按钮的alert()也显示出来,这表明事件onclick有效,但第二行的<select>标签保持为零,实际上没有模拟onclick事件。这个代码似乎拒绝在循环的所有循环中工作,但第一个循环除外。

最终目标是不需要模拟用户并在JavaScript上精确求解。我在循环中有一个动态变化的参数,我认为SeleniumIDE可能是我的答案,但我需要它在循环中使用一些逻辑和更改的参数。

这里列出了两个列表:脚本和html,其中应该执行脚本。

<input type="button" id="done" value="C'mon" />
<table>
  <tr>
    <td id="c10">
      <select name="c0">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
    </td>
    <td id="c11">
      <select name="c1">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
    </td>
    <td id="c12">
      <input value="OK" type="button" onclick="alert('gooood-goood')" />
    </td>
  </tr>
  <tr>
    <td id="c20">
      <select name="c0">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
    </td>
    <td id="c21">
      <select name="c1">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</optiaon>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
    </td>
    <td id="c22">
      <input value="OK" type="button" onclick="alert('gooood-goood')" />
    </td>
  </tr>
</table>

然后编写脚本:

function foo() {
  alert('inside');
  
  var comb = rand(10, 99) + '', row = 1, col = 0;
  for (; row <= 2; row++) {
    for (; col <= 1; col++) {
      var select = '#c' + row + col + ' select[name=c' + col + ']';
      var option = "#c" + row + col + " select option[value=" + comb[col] + "]";
      $(select).change(function () {
        $(option).prop('selected', true);
      });
      $(select).change();
      if (col == 1) {
        var i = col + 1;
        $('#c' + row + i + ' input').click();
      }
    }
    
    col = 0;
    comb = rand(10, 99);
  }
}
$(function () {
  document.getElementById('done').onclick = foo;
});

function rand(min, max) { // Generate a random integer
  if (max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  } else {
    return Math.floor(Math.random() * (min + 1));
  }
}

更新

我不知道我做了什么,但现在已经奏效了。相同代码:/

在您的代码中:

>  var option = "#c"+ row + col + " select option[value=" + comb[col] + "]";
> 
>  $(select).change(function(){
> 
>    $(option).prop('selected', true);
>  });

更改函数中的变量option与外部optionvariable有一个闭包,因此该值将是循环结束时选项的值,即(其中comb[col]设置为6):

 "#c21 select option[value=6]";

顺便说一句,在不允许通过索引访问字符串的浏览器中(至少在IE的某些版本中),从comb中选择数字的方式将失败,这意味着rand函数可能只返回0到9之间的数字。

您可以使用以下方法解决第一个问题:

comb.substring(1,2)

 comb.charAt(1)

这让你正在做的事情更加明显。

您是否考虑过只获取表单控件并在这些控件上迭代,而不依赖于表结构?这会简单得多。

好吧,我刚刚意识到。第一次迭代后的comb = rand(10, 99);不是字符串。

只需要修复comb = rand(10, 99) + '';

相关内容

  • 没有找到相关文章

最新更新