JavaScript 点击不工作变量

Question

今天我遇到了 javascript 和一些变量的问题，我尝试点击按钮填充文本字段

示例:当点击“Youtube”时，在文本字段中插入 youtube 的 url。

            <div class="jumbotron">
            <h1 class="display-3"><?php echo $config['website-name']; ?></h1>
            <p class="lead"><?php echo $lang["slogan"]; ?></p>
            <div class="btn-group" role="group">
                <a id="twitter" class="btn btn-info" href="#"><?php echo $lang["twitter_1"]; ?></a>
                <a id="youtube" class="btn btn-danger" href="#"><?php echo $lang["youtube_1"]; ?></a>
                <a id="facebook" class="btn btn-primary" href="#"><?php echo $lang["facebook_1"]; ?></a>
            </div>
            <br>
            <br>
            <div class="btn-group" role="group">
                <a id="vikipedi" class="btn btn-secondary" href="#"><?php echo $lang["wikipedia"]; ?></a>
                <a id="google" class="btn btn-success" href="#"><?php echo $lang["google_1"]; ?></a>
            </div>
            <p class="lead">
            <form class="form-group" action="index.php" method="post">
                <input id="url" name="url" type="url" class="form-control" autocomplete="on" placeholder="http://"
                       autofocus required/>
                <br>
                <input class="btn btn-primary btn-lg" type="submit" value="<?php echo $lang["go"]; ?>"/>
            </form>
        </div>
        <div class="text-center">
            <p style="font-size:11px">
                <small><?php echo $lang["agree"]; ?> <a
                            href="<?php echo $config['website-url']; ?>/?tos"><?php echo $lang["tos_2"]; ?></a>
                </small>
            </p>
        </div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    $('#twitter').click(function () {
        $('#url').val('https://twitter.com');
    });
    $('#youtube').click(function () {
        $('#url').val('https://youtube.com');
    });
    $('#facebook').click(function () {
        $('#url').val('https://facebook.com');
    });
    $('#google').click(function () {
        $('#url').val('https://google.com');
    });
    $('#vikipedi').click(function () {
        $('#url').val('https://wikipedia.org');
    });
</script>

编辑:

出现如下错误:

but requested an insecure script 'code.jquery.com/jquery-3.3.1.js'; This request has been blocked; the content must be served over HTTPS.

Answer 1

看到this comment之后在评论区:

I found the problem but requested an insecure script 'code.jquery.com/jquery-3.3.1.js'; This request has been blocked; the content must be served over HTTPS.

正如在其他一些关于使用 HTTPS 作为脚本源的答案中所述(它们是正确的，我也不会放弃那些)，最好是使用以下方法自动解析为 HTTP 或 HTTPS，给定在给定环境下使用的 URL 协议(protocol)。

<script src="//code.jquery.com/jquery-3.3.1.js"></script>

同时完全省略了 http: 协议(protocol)。此方法对于其他方法特别有用，例如图像、CSS、URL、FTP 或任何要使用/从外部协议(protocol)提取的方法。

请注意当您以file:///的形式从您自己的计算机访问文件时，您将无法使用上述方法；此方法仅适用于外部资源。可以，但脚本不会加载。