選擇具有特定 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>