jQuery 如何使 $(this) 选择器触发多个类

Question

我有 2 个 table 具有相同包含的不同 class。 Table 1 显示在主要部分中，第二个 table 显示在弹出功能中。两者 table 仍在同一页面上 html。

我有一个使用 2 classes 选择器 的点击功能，我希望可以通过单击同时触发两个 table 并更改两个 tables 包含。但是点击功能只能在一个 table 中使用，而不是在两个 table 中使用。

请注意，第二个 table 是动态创建的，并不总是存在。

如果第二个 table 不存在，如何让它在每次点击时同时触发 table 而不是 return 错误。

我的代码：

$('.table1 a.name, .table2 a.name').click(function(c){
 c.preventDefault();
 var $item = $(this); 
 var checked = $('<img class="checked" src="https://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" width="30" height="30">');
  //$.post("", {data:datas},function(data){
    // some ajax result
    $($item).before(checked);
    $('img.checked').not(checked).remove();
  //});
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Table 1</h2>

<table class="table1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

<br>

<h2>Table 2</h2>

<table class="table2">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

Answer 1

由此- Event binding on dynamically created elements?

on jQuery 中的函数只能直接将事件附加到已创建的元素。

例如，您可以使用以下代码动态创建 table2-

$('body').on('click', '.table2 a.name', function (event){
//Code here
});

当点击body时，检查目标是否为.table2 a.name，如果是，则执行函数。

Answer 2

我找到了解决此问题的方法 post。

问题出在jQuery函数中 this on click function only refer to the element 被点击了。它永远不会依赖于声明为选择器的其他元素，即使它们具有相同的内容。

因此，如果您在多个元素中有相同的内容，解决方案是使用 filter 函数来搜索相同的值，然后您可以在您的操作中将它们全部作为一个威胁。

在我的例子中，我只需要在所有元素中标记相同的 a href 值。

更新后的代码段

$('.table1 a.name, .table2 a.name').click(function(c){
 c.preventDefault();
 var $item = $(this).attr('href'); 
 var checked = $('<img class="checked" src="https://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" width="30" height="30">');
  //$.post("", {data:datas},function(data){
    // some ajax result
    //$($item).before(checked);
    
    var marked =  $('.table1 a.name, .table2 a.name').filter(function() {
       $('img.checked').not(marked).remove();
        return $(this).attr('href') ===  $item;
    }).before(checked);   
    
    
  //});
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Table 1</h2>

<table class="table1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

<h2>Table 2</h2>

<table class="table2">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://whosebug.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

jQuery 如何使 $(this) 选择器触发多个类

jQuery How to Make $(this) Selector Fires Multiple Classes

html

javascript

ajax

jquery

jquery-selectors

jQuery 如何使 $(this) 选择器触发多个 类

jQuery How to Make $(this) Selector Fires Multiple Classes

html

javascript

ajax

jquery

jquery-selectors

jQuery 如何使 $(this) 选择器触发多个类