[英]Disable url on an element based on the value of another element
我有一個會有幾行的表。 在一列中,有一個鏈接(列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>
而不是這條線
$('td.regLink a')。replaceWith('Closed');
使其成為最接近的元素
$(this).closest('td.regLink a')。replaceWith('Closed');
我的建議是:
為了禁用鏈接,您可以刪除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>
您必須在條件中修剪.regFull
的內容以刪除空格。
轉到父tr然后選擇.regLink
里面的鏈接:
$(this).parents('tr').find('.regLink a').replaceWith('Closed');
如果列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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.