[英]Disable url on an element based on the value of another element
I have a table that will have several rows. 我有一个会有几行的表。 In one column, there is a link (column a).
在一列中,有一个链接(列a)。 In the second column, there is the string "Yes" or "No" (column b).
在第二列中,有字符串“是”或“否”(列b)。
If a cell in column b says "No", I want the link on the cell directly to the left of it in column a to become disabled. 如果列b中的单元格显示“否”,我希望单元格中的链接直接位于列a的左侧,以便禁用。
I'm using .each()
to go through each td in column b to see if the value is "Yes" or "No". 我正在使用
.each()
遍历b列中的每个td以查看值是“是”还是“否”。 It seems as though even if the cell in column b is "Yes", it will still disable (rename) the link on the matching cell. 似乎即使列b中的单元格为“是”,它仍将禁用(重命名)匹配单元格上的链接。 What am I missing?
我错过了什么?
$(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>
Instead of this line 而不是这条线
$('td.regLink a').replaceWith('Closed'); $('td.regLink a')。replaceWith('Closed');
Make it as closest element 使其成为最接近的元素
$(this).closest('td.regLink a').replaceWith('Closed'); $(this).closest('td.regLink a')。replaceWith('Closed');
My proposal is: 我的建议是:
in order to disable a link you may remove the href attribute. 为了禁用链接,您可以删除href属性。
To select all links you may reduce all to one line: 要选择所有链接,您可以将所有链接减少到一行:
$("td.regFull:contains('No')").siblings('td.regLink').children('a').removeAttr('href')
The snippet: 片段:
$(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>
You have to trim the content of .regFull
in the condition to remove the spaces. 您必须在条件中修剪
.regFull
的内容以删除空格。
Go up to the parent tr then select the link inside .regLink
: 转到父tr然后选择
.regLink
里面的链接:
$(this).parents('tr').find('.regLink a').replaceWith('Closed');
If a cell in column b says "No", I want the link on the cell directly to the left of it in column a to become disabled.
如果列b中的单元格显示“否”,我希望单元格中的链接直接位于列a的左侧,以便禁用。
So you have to reverse the operator in your condition from !==
to ===
. 所以你必须在你的条件下扭转运算符
!==
到===
。
Hope this helps. 希望这可以帮助。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.