Question

我有一个包含一堆tr元素的表，其中包含随机的，动态创建的id，以及具有匹配id的相应div。我想使用on（＆＃39; click＆＃39;）函数，这样当点击一个具有给定id的tr元素时，也会通过javascript点击相应的div id。

表格：

<tbody>
    <tr id="a94k5h3"></tr>
    <tr id="0f3l6k2"></tr>
    <tr id="44jg96a"></tr>
</tbody>

div：

<div id="a94k5h3"></div>
<div id="0f3l6k2"></div>
<div id="44jg96a"></div>

到目前为止我的代码：

    $(document).on('click', '#view_347 #a94k5h3', function(event) { 
    event.preventDefault(); 
    $("#view_349 .kn-view.kn-map-results.view_349 #a94k5h3").click(); 
});

上面的代码适用于第一个，但实际上我不知道id＃a94k5h3是什么，或者有多少tr / div。任何帮助将不胜感激！

- 编辑

我正在使用knack，它会动态创建所有html元素，这不是我的代码。我附上了输出图像，以便进行澄清。 [！[在此处输入图像说明] [1]] [1]

基本上我在页面上有两次相同的html元素。点击一个，我也希望点击另一个。

Answer 1

由于您不能在一个页面上拥有重复的ID，我建议您使用data-*属性，如下所示：

<tr data-id="#a94k5h3">

并使用.trigger("click")触发click上指定的DIV事件元素

实施例

＆＃13;

$(document).on('click', '[data-id]', function(event) {

  event.preventDefault(); // not sure you need this...

  // ID is unique! remember? you don't need the classes extra selectors
  // Use trigger "click"
  $($(this).data("id")).trigger("click");
});


// Just to test!:
$("#view_349").find("div").on("click", function() {
   console.log( this.id );
});

＆＃13;

<table>
  <tbody>
    <tr data-id="#a94k5h3"><td>a94k5h3 CLICK ME</td></tr>
    <tr data-id="#0f3l6k2"><td>0f3l6k2 CLICK ME</td></tr>
    <tr data-id="#44jg96a"><td>44jg96a CLICK ME</td></tr>
  </tbody>
</table>


<div id="view_349">
  <div id="a94k5h3">DIV a94k5h3</div>
  <div id="0f3l6k2">DIV 0f3l6k2</div>
  <div id="44jg96a">DIV 44jg96a</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

你的dom中不应该有重复的ID，而应该有data-*个属性。我选择了data-id，但你可以做的是获取点击行的ID，然后根据它进行选择，它看起来像这样：

＆＃13;

$(document).on('click', 'tr', (event) => { 
    event.preventDefault()
    let id = $(event.currentTarget).attr('id')
    $(`[data-id=${id}]`).addClass('selected').click()
})

＆＃13;

tr {background-color: red}
div.selected {background-color: yellow}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="a94k5h3"><td>Click Me</td></tr>
    <tr id="0f3l6k2"><td>Click Me</td></tr>
    <tr id="44jg96a"><td>Click Me</td></tr>
</table>

<div data-id="a94k5h3">1</div>
<div data-id="0f3l6k2">2</div>
<div data-id="44jg96a">3</div>

＆＃13;

Answer 3

添加TR元素单击处理程序，单击相应的DIV元素，需要一个不涉及未知随机id值的查询选择器。 E.G.基于控制台日志图像：

"#view_349 table.kn-table TBODY TR"

我假设DIV元素的选择器按照提供的方式工作

"#view_349 .kn-view.kn-map-results.view_349 #" + divId

然后TR元素单击侦听器函数可以使用单击TR元素的id，

 event.target.id

使用JQuery查找相应的DIV元素：

$(document).on('click', "#view_347 TR" function(event) { 
    event.preventDefault();
    var targetId = event.target.id;
    $("#view_349 .kn-view.kn-map-results.view_349 #" + targetId).click(); 
});

这可能适用于JQuery，但忽略了这样一个事实，即具有相同id的两个元素不是有效的HTML，如this question中所讨论的以及之前在评论和其他答案中提到的那样。我建议调查生成HTML的可能性，而不重复完全相同的元素id值。

在javascript中获取动态类元素

3 个答案:

实施例