时间戳

首页 > 解决方案 > 仅通过 css 或 javascript/jquery 在页面加载后呈现的小部件上显示特定链接

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

问题描述

我一直在试图找出解决我在网站上遇到的问题的方法，但我对 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 的帮助将不胜感激

标签： javascriptjqueryhtmlcss

解决方案

当您想过滤更多hrefs 时。您可以创建一个array预期href的 s，然后.filter()与它们一起.indexOf()使用hide/show

对于精确的字符串

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>

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

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>

推荐阅读