Question

我正在创建一个Javascript Bookmarklet以填写网站上的表单以进行测试（我无法修改网站）。

我似乎无法点击列表项中包含的锚标记。所以网站结构如下：

<Div> 
  <ul class="exampleClass"> 
    <li class="col-xs-3 col-sm-2" value="8"><a>8th</a></li>
    <li class="col-xs-3 col-sm-2" value="9"><a>9th</a></li>
    <li class="col-xs-3 col-sm-2" value="10"><a>10th</a></li>
  </ul>
</Div>

您已经注意到，锚标记没有任何ID或类。

我的Bookmarklet看起来像这样：

javascript: 

    var newVar = {
        formFill: function() {
            document.querySelectorAll("#ReasonValue")[0].value='2';
            document.find_element_by_xpath(".//a[contains(text(), '10th')]").click();
        }
    };
    newVar.formFill()

我只需要一种方法来点击/选择一个列表项

非常感谢任何帮助。

Answer 1

您必须使用以下程序：

要解析ul calss exampleClass中的li，然后解析li的锚标签，然后找到第10个文本，然后单击它：

var newVar = {
  formFill: function() {
      var c = document.getElementsByClassName('exampleClass')[0].children;
      for(var i=0; i<c.length;i++)
      {
      	var x = c[i].children;
      	for(var j=0; j<x.length;j++)
        {
          if(x[j].innerHTML == "10th")
          {
              console.log(x[j]);
              x[j].click();
          }
        }
      }
   }
};
newVar.formFill()

<div> 
  <ul class="exampleClass"> 
    <li class="col-xs-3 col-sm-2" value="8"><a>8th</a></li>
    <li class="col-xs-3 col-sm-2" value="9"><a>9th</a></li>
    <li class="col-xs-3 col-sm-2" value="10"><a>10th</a></li>
  </ul>
</div>

但是，除非在a标签中添加href或其他内容，否则您将无法看到任何内容。

<强>更新

在点击上添加了提醒：

var newVar = {
  formFill: function() {
      var c = document.getElementsByClassName('exampleClass')[0].children;
      for(var i=0; i<c.length;i++)
      {
      	var x = c[i].children;
      	for(var j=0; j<x.length;j++)
        {
          if(x[j].innerHTML == "10th")
          {
              console.log(x[j]);
              x[j].click();
          }
        }
      }
   }
};
newVar.formFill()

<div> 
  <ul class="exampleClass"> 
    <li class="col-xs-3 col-sm-2" value="8"><a>8th</a></li>
    <li class="col-xs-3 col-sm-2" value="9"><a>9th</a></li>
    <li class="col-xs-3 col-sm-2" value="10"><a onclick="javascript:alert('clicked');">10th</a></li>
  </ul>
</div>

Answer 2

使用jQuery会更容易，但我会假设无论出于什么原因你都不能使用jQuery，只能使用JavaScript。

我会尝试这样的事情：

document.querySelector("ul.exampleClass li[value=10] a").click();

Answer 3

简单示例：选择具有属性值的所有li-Tags中的所有a-Tags，并以编程方式单击它们。您可以更改查询中的value属性，这样只需要点击一个项目＆＃34;。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js.js"></script>
</head>
<body>

<Div>
    <ul class="exampleClass">
        <li class="col-xs-3 col-sm-2" value="8"><a onclick="console.log('clicked 8th')">8th</a></li>
        <li class="col-xs-3 col-sm-2" value="9"><a onclick="console.log('clicked 9th')">9th</a></li>
        <li class="col-xs-3 col-sm-2" value="10"><a onclick="console.log('clicked 10th')">10th</a></li>
    </ul>    
</Div>

</body>
</html>

使用Javascript：

var newVar = {
    formFill: function() {
        let aTags = document.querySelectorAll("li[value] a");
        let event = new Event("click", {preventDefault: false});
        aTags.forEach((atag) => {
            atag.dispatchEvent(event);
            // or without events: atag.click();
        });
    }
};

document.addEventListener("DOMContentLoaded" , newVar.formFill);

如何使用Javascript单击锚标记（没有id或类）

3 个答案: