jQuery如何使$(this)选择器触发多个类 [英] jQuery How to Make $(this) Selector Fires Multiple Classes

问题描述

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

I have 2 tables with different class that have same contain. Table 1 shown in main section and the second table shown on a popup function. Both table still on the same page html.

我有一个使用 2个类选择器的点击功能，希望该功能可以一次单击即可触发两个表并更改两个表中包含的内容.但是click功能只能在一个表中使用，而不能在两个表中使用.

I have a click function using 2 classes selectors which is I hope can fires both tables on single click and change both tables contain. But the click function only works in one table, not both tables.

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

Note that the second table is dinamically created and not always existed.

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

How to make it fires both tables on each click and not return error if second table doesn't exist.

我的代码:

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

推荐答案

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

I found a workaround for this post.

问题是在jQuery函数中this的单击功能仅引用元素 被点击.即使它们具有相同的内容，也永远不会指望被声明为选择器的其他元素.

The problem is in jQuery the function this on click function only refer to the element that got clicked. It's never counted on other elements which is declared as selectors even if they have identical contents.

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

So the solution if you have same content in multiple elements is to use filter function to search for same values and then you can threated them all as one in your action.

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

In my case I just need to marked the same a href values in all elements.

更新的代码段

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

这篇关于jQuery如何使$(this)选择器触发多个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！