javascript - 仅在页面加载后呈现的小部件上通过 css 或 javascript/jquery 显示特定链接

Question

我一直在尝试为我在网站上遇到的问题找出解决方案，但我对 jquery/javascript 不是很擅长。

我们的页面在页面加载后呈现一些 javascript 并在页面上呈现一堆 html/css，我们感兴趣的部分如下所示:

<div class="profile-list">
<a class="profile-profile" href="https://website.com/?profile=joe_blogs_337#show_more">Add loads of html</a>
<a class="profile-profile" href="https://website.com/?profile=sam_smith_292#show_more">Add loads of html</a>
<a class="profile-profile" href="https://website.com/?profile=john_doe_31#show_more">Add loads of html</a>
<a class="profile-profile" href="https://website.com/?profile=stack_overflow_17#show_more">Add loads of html</a>
</div>

我只想显示某些配置文件，如果有任何不匹配的配置文件，我们就不会关心它们。

例如，我尝试使用 CSS 来实现，我可以通过以下方式单独隐藏:

a.profile-profile[href$='?profile=stack_overflow_17#show_more'] {
    display: none !important;
}

我可以通过以下方式隐藏除一个之外的所有内容:

a.profile-profile:not([href$='?profile=stack_overflow_17#show_more']) {
    display: none !important;
}

但是，如果我尝试隐藏除两个之外的所有内容，它们都会显示隐藏...

a.profile-profile:not([href$='?profile=stack_overflow_17#show_more']), a.profile-profile:not([href$='?profile=john_doe_31#show_more']) {
    display: none !important;
}

我假设我不能通过 CSS 做到这一点，因此我正在寻找一个快速的 javascript 解决方案...

有没有一种方法可以检测外部 js 何时触发，以便它尽快修改呈现的 HTML？

我不想通过以下方式隐藏所有链接:

.main_content .profile-list .profile-profile{
    display: none;
}

然后使用

$("a[href$=?profile=stack_overflow_17#show_more]").show();
$("a[href$=?profile=john_doe_31#show_more]").show();

任何有关 jQuery/Javascript 的帮助将不胜感激

Answer 1

虽然你想过滤更多的hrefs..你可以创建一个array预期的href然后使用.filter () 和 .indexOf() 来隐藏/显示它们

^{对于精确的字符串}

var a_Links = [
  "?profile=stack_overflow_17#show_more",
  "?profile=john_doe_31#show_more"
  // add more expected href's .....
];
$('a').filter(function(){
  return a_Links.indexOf($(this).attr('href')) > -1
}).hide();  // to show use `.show()`

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a class="profile-profile" href="just">A Link</a>
<a class="profile-profile" href="?profile=stack_overflow_17#show_more">Another Link</a>
<a class="profile-profile" href="?profile=john_doe_31#show_more">Another 2 Link</a>

^{相反 特别是 .profile-list 元素中的链接 并且包含查找数组 indexOf 中的任何字符串的函数> 任何 href}

var a_Links = [
  "?profile=stack_overflow_17#show_more",
  "?profile=john_doe_31#show_more"
  // add more expected href's .....
];
$('.profile-list a.profile-profile').filter(function(){
  return contains(a_Links , $(this).attr('href').trim().toLowerCase()) !== 1;
}).hide();  // to show use `.show()`


function contains(a , href) {
  var founded = 0
  for (var i = 0; i < a.length; i++) {
      if(founded == 1){break;}
      founded = (href.indexOf(a[i]) > -1) ? 1 : 0;
  }
  return founded;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="profile-list">
  <a class="profile-profile" href="just">A Link</a>
  <a class="profile-profile" href="link?profile=stack_overflow_17#show_more">Another Link</a>
  <a class="profile-profile" href="link?profile=john_doe_31#show_more">Another 2 Link</a>
</div>


<div class="another-profile-list">
  <a class="profile-profile" href="just">A Link</a>
  <a class="profile-profile" href="?profile=stack_overflow_17#show_more">Another Link</a>
  <a class="profile-profile" href="?profile=john_doe_31#show_more">Another 2 Link</a>
</div>