根据另一个元素的值禁用元素上的url

Question

我有一个会有几行的表。 在一列中，有一个链接（列a）。 在第二列中，有字符串“是”或“否”（列b）。

如果列b中的单元格显示“否”，我希望单元格中的链接直接位于列a的左侧，以便禁用。

我正在使用.each()遍历b列中的每个td以查看值是“是”还是“否”。 似乎即使列b中的单元格为“是”，它仍将禁用（重命名）匹配单元格上的链接。 我错过了什么？

 $(document).ready(function () { $("td.regFull").each(function () { console.log($(this).text()); if($(this).text() !== 'No') { $('td.regLink a').replaceWith('Closed'); } }); }); 

 td { border: 1px solid black; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>Link</th> <th>Registration Open</th> </tr> <tr> <td class="regLink"> <a href="#">Register</a> </td> <td class="regFull"> No </td> </tr> <tr> <td class="regLink"> <a href="#">Register</a> </td> <td class="regFull"> Yes </td> </tr> </table> 

Answer 1

而不是这条线

$（'td.regLink a'）。replaceWith（'Closed'）;

使其成为最接近的元素

$（this）.closest（'td.regLink a'）。replaceWith（'Closed'）;

Answer 2

我的建议是：

为了禁用链接，您可以删除href属性。

要选择所有链接，您可以将所有链接减少到一行：

$("td.regFull:contains('No')").siblings('td.regLink').children('a').removeAttr('href')

片段：

 $(function () { $("td.regFull:contains('No')").siblings('td.regLink').children('a').removeAttr('href').text('Closed'); }); 

 td { border: 1px solid black; padding: 5px; } 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <table> <tr> <th>Link</th> <th>Registration Open</th> </tr> <tr> <td class="regLink"> <a href="#">Register</a> </td> <td class="regFull"> No </td> </tr> <tr> <td class="regLink"> <a href="#">Register</a> </td> <td class="regFull"> Yes </td> </tr> <tr> <td class="regLink"> <a href="#">Register</a> </td> <td class="regFull"> No </td> </tr> <tr> <td class="regLink"> <a href="#">Register</a> </td> <td class="regFull"> Yes </td> </tr> </table> 

Answer 3

1. 您必须在条件中修剪.regFull的内容以删除空格。

2. 转到父tr然后选择.regLink里面的链接：

    $(this).parents('tr').find('.regLink a').replaceWith('Closed'); 

3. 如果列b中的单元格显示“否”，我希望单元格中的链接直接位于列a的左侧，以便禁用。

   所以你必须在你的条件下扭转运算符!==到=== 。

希望这可以帮助。

 $(document).ready(function () { $("td.regFull").each(function () { console.log($(this).text().trim()); if($(this).text().trim() === 'No') { $(this).parents('tr').find('.regLink a').replaceWith('Closed'); } }); }); 

 td { border: 1px solid black; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>Link</th> <th>Registration Open</th> </tr> <tr> <td class="regLink"> <a href="#">Register</a> </td> <td class="regFull"> No </td> </tr> <tr> <td class="regLink"> <a href="#">Register</a> </td> <td class="regFull"> Yes </td> </tr> </table>