如何在单个博主帖子中添加两个 html 脚本？

骑士Photoshop

我在博主中有自己的博客，我是一个内容提供商。我在博客文章中为某些下载链接使用了内容锁定代码。一切都很顺利，直到我偶然发现了这一点。在一篇文章中有两个以上的下载链接，我尝试再次添加相同的脚本。该脚本实际上是一个订阅解锁脚本，观众需要订阅才能解锁链接。我在下面附上了我的代码。当我再次将相同的代码添加到我的帖子时，问题出现了，我的频道的 youtube 链接实际上应该在新标签中打开，但没有在新标签中打开，而在同一个标签中打开！这不允许我的观众在帖子关闭和 youtube 打开时解锁内容。此外，第一个 yt 内容储物柜不会发生此问题，而只会在第二个内容储物柜中出现并继续存在。请帮我解决这个问题。此外，我不是任何优秀的编码员或对编码有任何了解。所以请简化答案。下面我附上了我的 YouTube 内容储物柜代码。

<meta charset="utf-8"></meta>
        <style>
        @import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
        html, body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    }
        #sociallocker {
            background-color: #EEEEEE;
            text-align: center;
            position: relative;
            max-width: 500px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius:10px;
        }
        #sociallocker-overlay {
            background-color: rgba(0,0,0,0.6);
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            transition: all 0.2s ease;
        }
        #sociallocker-overlay i {
            margin-right: 10px;
        }
        #sociallocker:hover #sociallocker-overlay {
            top: -100%;
            transition: all 0.2s linear;
        }
        #sociallocker:hover #sociallocker-content {
            top: 100%;
            transition: all 0.2s linear;
        }
        #sociallocker-content a {
            display: inline-block;
            text-decoration: none;
            padding: 10px 20px;
            background-color: #777777;
            color: #f9f9f9;
            border-radius: 4px;
            font-weight: bold;
        }
        #sociallocker-overlay,
        #sociallocker-content,
        #sociallocker-links{
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0;
            left: 0;
        }
        #sociallocker-content {
            background-color: #ccc;
            transition: all 0.2s ease;
        }
        .social-1 {
            text-decoration: none;
            color: #ffffff;
            display: inline-block;
            width: 498px;
            height: 118px;
            overflow: hidden;
            margin-right: 0px;
        }
        .social-1 i {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        .social-1:hover i {
            background-color: rgba(0,0,0,0.1);
            transform: scale(1.2);
            transition: all 0.2s;
        }
        .fb { background-color: #FF0000; }
</style>
        <div id="sociallocker">
            <div id="sociallocker-links">
                <a class="social-1 fb" href="https://www.youtube.com/channel/UCqUX2UrWUz778zSFxPtVRyw?sub_confirmation=1"><i class="fab fa-youtube fa-3x"></i></a>
            </div>
            <div id="sociallocker-content">
                <a href="DOWNLOAD LINK HERE" rel="nofollow" target="_blank"><i class="fas fa-download"></i> Download</a>
            </div>
            <div id="sociallocker-overlay"><i class="fas fa-lock"></i>SUBSCRIBE TO UNLOCK</div>
        </div>
        <script>
        (function() {
            var sl = document.querySelector("#sociallocker");
            var slc = document.querySelector("#sociallocker-content");
            if (!sl) return;
            var old_slc_html = slc.innerHTML;
            slc.innerHTML = slc.innerHTML.replace(/(href=")(.*)(\")/g, "href=\"#\"");
            sl.querySelectorAll("#sociallocker-links a").forEach(function(ele) {
                ele.onclick = function(e) {
                    var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
                    var check_window_close = setInterval(function() { 
                        if (web_window.closed) {
                            clearInterval(check_window_close);
                            slc.innerHTML = old_slc_html;
                            document.querySelector("#sociallocker-links").style.display = "none";
                            document.querySelector("#sociallocker-overlay").style.display = "none"; 
                            document.querySelector("#sociallocker-content").style.top = "0";
                        }
                    }, 1000);
                    e.preventDefault();
                };
            });
        })();
        </script>

瓦诺姆

问题是储物柜使用id并且id必须是唯一的，但是当您创建储物柜的多个副本时，这些id会发生冲突。因此，储物柜的 javascript 部分仅在第一个储物柜上设置事件侦听器。

要解决这个问题，您需要将所有id和对它的引用转换为 css 类，而不是您可以对所有使用单个 javascript：

https://jsfiddle.net/vanowm/5gvb7caL/

<meta charset="utf-8"></meta>
        <style>
        @import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
        html, body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    }
        .sociallocker {
            background-color: #EEEEEE;
            text-align: center;
            position: relative;
            max-width: 500px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius:10px;
        }
        .sociallocker-overlay {
            background-color: rgba(0,0,0,0.6);
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            transition: all 0.2s ease;
        }
        .sociallocker-overlay i {
            margin-right: 10px;
        }
        .sociallocker:hover .sociallocker-overlay {
            top: -100%;
            transition: all 0.2s linear;
        }
        .sociallocker:hover .sociallocker-content {
            top: 100%;
            transition: all 0.2s linear;
        }
        .sociallocker-content a {
            display: inline-block;
            text-decoration: none;
            padding: 10px 20px;
            background-color: #777777;
            color: #f9f9f9;
            border-radius: 4px;
            font-weight: bold;
        }
        .sociallocker-overlay,
        .sociallocker-content,
        .sociallocker-links{
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0;
            left: 0;
        }
        .sociallocker-content {
            background-color: #ccc;
            transition: all 0.2s ease;
        }
        .social-1 {
            text-decoration: none;
            color: #ffffff;
            display: inline-block;
            width: 498px;
            height: 118px;
            overflow: hidden;
            margin-right: 0px;
        }
        .social-1 i {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        .social-1:hover i {
            background-color: rgba(0,0,0,0.1);
            transform: scale(1.2);
            transition: all 0.2s;
        }
        .fb { background-color: #FF0000; }
</style>
<!-- first locker !-->
        <div class="sociallocker">
            <div class="sociallocker-links">
                <a class="social-1 fb" href="https://www.youtube.com/channel/UCqUX2UrWUz778zSFxPtVRyw?sub_confirmation=1"><i class="fab fa-youtube fa-3x"></i></a>
            </div>
            <div class="sociallocker-content">
                <a href="DOWNLOAD LINK HERE" rel="nofollow" target="_blank"><i class="fas fa-download"></i> Download</a>
            </div>
            <div class="sociallocker-overlay"><i class="fas fa-lock"></i>SUBSCRIBE TO UNLOCK</div>
        </div>

<!-- second locker !-->
        <div class="sociallocker">
            <div class="sociallocker-links">
                <a class="social-1 fb" href="https://www.youtube.com/channel/UCqUX2UrWUz778zSFxPtVRyw?sub_confirmation=1"><i class="fab fa-youtube fa-3x"></i></a>
            </div>
            <div class="sociallocker-content">
                <a href="DOWNLOAD LINK HERE" rel="nofollow" target="_blank"><i class="fas fa-download"></i> Download</a>
            </div>
            <div class="sociallocker-overlay"><i class="fas fa-lock"></i>SUBSCRIBE TO UNLOCK</div>
        </div>

<!-- third locker !-->
        <div class="sociallocker">
            <div class="sociallocker-links">
                <a class="social-1 fb" href="https://www.youtube.com/channel/UCqUX2UrWUz778zSFxPtVRyw?sub_confirmation=1"><i class="fab fa-youtube fa-3x"></i></a>
            </div>
            <div class="sociallocker-content">
                <a href="DOWNLOAD LINK HERE" rel="nofollow" target="_blank"><i class="fas fa-download"></i> Download</a>
            </div>
            <div class="sociallocker-overlay"><i class="fas fa-lock"></i>SUBSCRIBE TO UNLOCK</div>
        </div>
<!-- end locker !-->

        <script>
        (function() {
            var sls = document.querySelectorAll(".sociallocker");
            sls.forEach(sl =>
            {
              var slc = sl.querySelector(".sociallocker-content");
              if (!sl) return;
              var old_slc_html = slc.innerHTML;
              slc.innerHTML = slc.innerHTML.replace(/(href=")(.*)(\")/g, "href=\"#\"");
              sl.querySelectorAll(".sociallocker-links a").forEach(function(ele) {
                  ele.onclick = function(e) {
                      var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
                      var check_window_close = setInterval(function() { 
                          if (web_window.closed) {
                              clearInterval(check_window_close);
                              slc.innerHTML = old_slc_html;
                              sl.querySelector(".sociallocker-links").style.display = "none";
                              sl.querySelector(".sociallocker-overlay").style.display = "none"; 
                              sl.querySelector(".sociallocker-content").style.top = "0";
                          }
                      }, 1000);
                      e.preventDefault();
                  };
              });
            });
        })();
        </script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-09-9

我来说两句

0 条评论

登录后参与评论

上一篇：我们可以在另一个服务器的频道中检查成员权限吗？(discord.js v12)

TOP 榜单

文章

如何在单个博主帖子中添加两个 html 脚本？

如何在单个博主帖子中添加两个 html 脚本？

Android Studio Kotlin：提取为常量

计算数据帧R中的字符串频率

如何使用Redux-Toolkit重置Redux Store

http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

TreeMap中的自定义排序

TYPO3：将 Formhandler 添加到新闻扩展

遍历元素数组以每X秒在浏览器上显示

在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

无法连接网络并在Ubuntu 14.04中找到eth0

将辅助轴原点与主要轴对齐

我可以ping IPv6但不能ping IPv4

在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

提交html表单时为空

使用C ++ 11将数组设置为零

如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

尝试在Dell XPS13 9360上安装Windows 7时出错

如何在R中转置数据

无法使用 envoy 访问 .ssh/config

未捕获的SyntaxError：带有Ajax帖子的意外令牌u