Question

我有3个具有相同ID的按钮，我需要在点击时获取每个按钮值。

<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>

这是我当前的jQuery脚本：

$("#xyz").click(function(){
      var xyz = $(this).val();
      alert(xyz);
});

但它仅适用于第一个按钮，单击其他按钮将被忽略。

Answer 1

我有3个ID相同的按钮......

您的HTML无效，您在页面中不能有多个具有相同id的元素。

Quoting the spec：

7.5.2 元素标识符：id和class属性

id = name [CS]
  此属性为元素指定名称。该名称在文档中必须是唯一的。

解决方案：从id更改为class，

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

jQuery代码：

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery :$(this).val() to get the value of the input.
});

但它仅适用于第一个按钮

jQuery #id选择器docs：

每个id值只能在文档中使用一次。 如果为多个元素分配了相同的ID，则使用该ID的查询将仅选择DOM中的第一个匹配元素。不应依赖此行为;使用相同ID的多个元素的文档无效。

如果您查看jQuery源代码，当您使用id selecor（$）调用$("#id")时，jQuery会调用本机javascript document.getElementById函数：

// HANDLE: $("#id")
} else {
    elem = document.getElementById( match[2] );
}

虽然，在document.getElementById {{1}}他们没有提到它必须返回第一个值，这是大多数（可能全部？）浏览器实现它的方式。

<强> spec

Answer 2

ID表示“标识符”，每个文档仅有效一次。由于此时你的HTML是错误的，一些浏览器选择第一个，一些是具有该ID的最后一个发生元素。

更改名称的ID将是一个很好的步骤。

然后使用$('button[name="xyz"]').click(function(){

Answer 3

根据我的经验，如果您使用$('button#xyz')选择器，它将起作用。这是一个黑客，但它仍然是无效的HTML。

Answer 4

如果您有多个具有相同ID的元素，这也有效。

 $("button#xyz").click(function(){
  var xyz = $(this).val();
  alert(xyz);
 });

您可以查看HERE

Answer 5

您不能拥有相同的ID，因为ID在页面HTML中是唯一的。将其更改为类或其他属性名称。

$('attributename').click(function(){ alert($(this).attr(attributename))});

Answer 6

尽管将id更改为类更好，但您可以使用attribute equals selector获取具有相同ID的所有元素：

override func viewDidLoad() {
    super.viewDidLoad()
    print("viewDidLoad")
    // Do any additional setup after loading the view.
    self.view.backgroundColor = UIColor.clear

    //tableview
    self.tableView.delegate = self
    self.tableView.dataSource = self
    self.tableView.backgroundView = nil
    self.tableView.backgroundColor = UIColor.clear

    //動的に高さを変更
    self.tableView.estimatedRowHeight = 155
    self.tableView.rowHeight = UITableViewAutomaticDimension

    //indicator
    self.tableView.showIndicator()

    //loaddata
    loadData(page:0)

}

或者这只能得到id为xyz的按钮：

$('[id="xyz"]')

或者id为xyz的div：

$('button[id="xyz"]')

等

或者，您可以使用"Attribute Contains Selector"获取包含“xyz”的ID的所有元素：

$('div[id="xyz"]')

当然，这意味着所有具有部分包含“xyz”的id的元素都将被选中。

Answer 7

如果容器中的ID相同，则可以使用on（）来访问每个事件的每个元素

$("#containers").on("click","#xyz",function(){
  alert($(this).val())
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="containers">

<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>

</div>

，有关on（）的信息为here

jQuery id选择器仅适用于第一个元素

7 个答案: