Question

我有一个灯箱插件，它使用lightview类进行链接。因此用法如下：

<a href="https://youtube.com/embed/HPOcZtfjrrU?start=102&autoplay=1" class="lightview">Link for the site</a>

我想为每个启动此网址的链接添加此类（lightview）：

https://youtube.com/embed/

这是重要的部分：
我不想为这样的链接添加类：
https://www.youtube.com/watch?v=XtSf8GqrF6Q
因为此网址将嵌入我的网站。

Answer 1

使用jQuery，您可以使用[attribute^=value]选择器选择具有以给定值开头的属性的所有元素。然后，您只需要将lightview类添加到这些元素中。它很简单：

$("a[href^='https://youtube.com/embed']").addClass("lightview");

这是一个演示：

＆＃13;

$("a[href^='https://youtube.com/embed']").addClass("blue");

＆＃13;

a {
    display:block;
    color:red;
}

a.blue {
    color:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="https://youtube.com/embed/HPOcZtfjrrU?start=102&autoplay=1">Video with right link</a>
<a href="https://www.youtube.com/watch?v=XtSf8GqrF6Q">Video without right link</a>
<a href="http://www.google.com">Link to Google</a>
<a href="https://youtube.com/embed/HPOcZtfjrrU?start=102&autoplay=1">Antoher video with right link</a>
<a href="http://stackoverflow.com">Another wrong link</a>

＆＃13;

Answer 2

您可以使用Jquery检索a代码，如果href以https://youtube.com/embed/开头，则会为每个代码添加一个类：

$(function(){
  $("a").each(function(ix, el){
    if(el.href.match("^https://youtube.com/embed/")) {
      $(el).addClass('lightbox');
    }
  })
});

这是plunk。

Answer 3

jQuery可用于实现所需的结果，也可以在纯CSS3中完成，如下所示：

a[href^='https://youtube.com/embed'] {
color:blue;
}

因为它不使用任何形式的JavaScript，无论用户是否启用了JavaScript，它都能正常工作

如何根据youtube.com/embed网址添加链接类？

3 个答案: