选择具有特定 get 变量的 href 的链接

Question

在下面的示例中 - 如何选择具有c=ni的链接

 let a = 'c=ni'; let target = '...'; // select `alink` having `a` inside its href //target.addClass('act');

 .act{background:orange;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class='alink' href='index.php?c=kb'>lorem</a> <br> <a class='alink' href='index.php?c=ni'>lorem</a>

Answer 1

纯JS

您可以使用带有*通配符的querySelector

 let a = 'c=ni'; let target = document.querySelector(`a[href*='${a}']`) target.classList.add('act');

 .act{background:orange;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class='alink' href='index.php?c=kb'>lorem</a> <br> <a class='alink' href='index.php?c=ni'>lorem</a>

jQuery

查询选择器相同，使用first()只选择一个

 let a = 'c=ni'; $(`a[href*='${a}']`).first().addClass('act')

 .act{background:orange;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class='alink' href='index.php?c=kb'>lorem</a> <br> <a class='alink' href='index.php?c=ni'>lorem</a>

Answer 2

您可以使用属性选择器。 它们可用于 javascript、jQuery 或 CSS。 在此处阅读有关属性选择器的更多信息

 let target = $('.alink[href*="c=ni"]'); target.addClass('act');

 .act{background:orange;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class='alink' href='index.php?c=kb'>lorem</a> <br> <a class='alink' href='index.php?c=ni'>lorem</a>