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

Posted 2023-05-09

【中文标题】jQuery 如何使 $(this) 选择器触发多个类

【英文标题】：jQuery How to Make $(this) Selector Fires Multiple Classes

【发布时间】：2019-02-16 18:51:06

【问题描述】：

我有 2 个具有相同包含的不同类的表。 主要部分中显示的表 1 和弹出功能中显示的第二个表。两个表仍然在同一个页面 html 上。

我有一个使用 2 个类选择器 的点击功能，我希望可以在单击时触发两个表并更改两个表包含的内容。但是点击功能只适用于一个表，不能同时适用于两个表。

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

如何让它在每次点击时触发两个表，并且如果第二个表不存在则不返回错误。

我的代码：

$('.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"  >');
  //$.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://***.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://***.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://***.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://***.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://***.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://***.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

【参考方案1】：

从此- Event binding on dynamically created elements?

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

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

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

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

【讨论】：

使用$(this) 选择器我可以正确执行动态创建的表2。那里没问题。这里的问题是它不能同时执行两个表。我认为这个组合选择器$('.table1 a.name, .table2 a.name') 的语法仍然不正确，因为它一次只能执行一个表。

@DrunkenM，使用$(document).on('click', '.table1 a.name, .table2 a.name', function() //Your code)

@Satpal 仍然无法正常工作。它没有执行两个表。 jsfiddle.net/2rt2t/342

@Satpal 我找到了使用filter function 的解决方法。你还想回答这个问题吗？请删除重复项，因为参考链接未显示此问题的正确解决方案。

【参考方案2】：

我为这篇文章找到了解决方法。

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

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

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

更新的sn-p

$('.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"  >');
  //$.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://***.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://***.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://***.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://***.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://***.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://***.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>