Question

我需要在页面上自动提交一个按钮，可以选择多个按钮。挑战在于按钮没有名称或ID引用，而是每个输入元素使用“tabindex = n”ID。快速简单的方法是在表单中添加唯一的名称或ID，但我们无法访问服务器端代码，因此必须在客户端完成所有操作。

我尝试了各种方法但似乎没有任何帮助，所以这里是表单代码......

<div tabindex="1" class="dp" onkeypress="if (event &amp;&amp; (event.keyCode == 32 || event.keyCode == 13)) RD.selection('http://node.blankplanet.com');" onclick="RD.selection('http://node.blankplanet.com/'); return false;">
  <img class="largeIcon float" alt="Node..." src="/images/local.png?id=3B194F1192F038FFF32BF9C4AFF16AA1859EC1D2462FB845BC9813C490A994BB">
  <div class="Description float">
    <span class="largeTextNoWrap indentNonCollapsible">Node..</span>
  </div>
</div>    

<div tabindex="2" class="dp" onkeypress="if (event &amp;&amp; (event.keyCode == 32 || event.keyCode == 13)) RD.selection('http://node2.blankplanet.com/');" onclick="RD.selection('http://node2.blankplanet.com/'); return false;">
  <img class="largeIcon float" alt="Node2..." src="/images/dp.png?id=D29E7325C0DB2C8C6DE5B6632374C52A6975B90CA5FCB6F05F801496191334AF">      
  <div class="dpDescription float">
    <span class="largeTextNoWrap indentNonCollapsible">Node2...</span>
  </div>
</div>

<div tabindex="3" class="dp" onkeypress="if (event &amp;&amp; (event.keyCode == 32 || event.keyCode == 13)) RD.selection('http://node3.blankplanet.com');" onclick="RD.selection('http://node3.blankplanet.com/'); return false;">
  <img class="largeIcon float" alt="Node3..." src="/images/dp.png?id=D29E7325C0DB2C8C6DE5B6632374C52A6975B90CA5FCB6F05F801496191334AF">      
  <div class="dpDescription float">
    <span class="largeTextNoWrap indentNonCollapsible">Node3...</span> 
  </div>
</div>

Answer 1

如果你想自动提交说按钮2，那么你会想要使用以下选择器：

$('div[tabindex=2]').click();

在这里试试： http://jsfiddle.net/85h3gtnj/1/

实际上要确保没有其他div，你应该添加类选择器

$('div.dp[tabindex=2]').click();

在这里摆弄： http://jsfiddle.net/85h3gtnj/3/

Answer 2

如果tabindex是在页面上可靠设置的属性，您可以使用它来调用click（）事件：

$.each('div', function() {
    if ($(this).attr('tablindex') == 4) {
        $(this).click(); //makes it submit
    }
});

你也可以使用nth-child选择器调用div：

$('#container div:nth-child(4)').click();

有关nth-child的信息，请访问：https://api.jquery.com/nth-child-selector/

希望有所帮助！

Answer 3

你需要什么？飞行：https://jsfiddle.net/288er5td/

CODE：

<div tabindex="1" class="dp" >
    <img class="largeIcon float" alt="Node..." src="/images/local.png?id=3B194F1192F038FFF32BF9C4AFF16AA1859EC1D2462FB845BC9813C490A994BB" />
  <div class="Description float">
            <input data-input-field='' type='text' val ='val1' />
    <span class="largeTextNoWrap indentNonCollapsible">Node..</span>
  </div>
</div>    

<div tabindex="2" class="dp">
    <img class="largeIcon float" alt="Node2..." src="/images/dp.png?id=D29E7325C0DB2C8C6DE5B6632374C52A6975B90CA5FCB6F05F801496191334AF" />      
  <div class="dpDescription float">
      <input data-input-field='' type='text' val ='val2' />
    <span class="largeTextNoWrap indentNonCollapsible">Node2...</span>
  </div>
</div>

<div tabindex="3" class="dp">
    <img class="largeIcon float" alt="Node3..." src="/images/dp.png?id=D29E7325C0DB2C8C6DE5B6632374C52A6975B90CA5FCB6F05F801496191334AF" />      
  <div class="dpDescription float">
            <input data-input-field='' type='text' val ='val3' />
    <span class="largeTextNoWrap indentNonCollapsible">Node3...</span> 
  </div>
</div>


$(document).ready(function(){
    t = function(elem){
        var $this = elem;
        var $tab = $this.closest('.dp');
        var tabindex = $tab.attr('tabindex');
        var i_val = $this.val();
        alert(tabindex);
        alert(i_val);
    }
    $(document).on('click', '[data-input-field]', function(){
        t($(this));

    });
    $(document).on('keypress', '[data-input-field]', function(event){
        if ((event.keyCode == 32) || (event.keyCode == 13)){
            t($(this));
        }     
    });
});

获取按钮上的元素id并使用jquery自动单击

3 个答案: