时间戳

首页 > 解决方案 > 如何使用取自文本字段的片段构建链接，但在 JavaScript 中以随机化它们，然后在其自己的选项卡上打开每个片段

javascript - 如何使用取自文本字段的片段构建链接，但在 JavaScript 中以随机化它们，然后在其自己的选项卡上打开每个片段

问题描述

我正在尝试使一个 JavaScript 能够随机化多个链接，这些链接必须使用从文本字段中获取的片段构建，然后通过单击按钮在其自己的选项卡上打开每个链接。

我知道 2 个不同的 JavaScript 可以分别做这两件事：

但是我找不到一种将它们中的两个混合在一个 JavaScript 中的工作方法。

我已经尝试了几种选择来实现这一点，但我根本不是专家，所以我一直在失败和失败。

为了让这篇文章更容易理解，我为它做了一个小提琴，但不幸的是，来自小提琴的链接通常在许多网站上被阻止，因此我改用 w3schools 页面，以使我的示例能够正常工作：
https://www .w3schools.com/code/tryit.asp?filename=GT70R73WAL8A

到目前为止，我的代码是这样的：

var srchTwtrClbrts = [
    { url: "https://twitter.com/search?q= from:ddlovato since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:jtimberlake since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:selenagomez since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:ArianaGrande since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:taylorswift13 since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:rihanna since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:katyperry since:"+a+" until:"+b+" "+c+" " },
    { url: "https://twitter.com/search?q= from:justinbieber since:"+a+" until:"+b+" "+c+" " },
 ];

var a=$("#searchSince").val(),b=$("#searchUntil").val(),c=$("#searchLiveOrTop").val();

$('#searchTwitterAccounts').click(function(searchTwitterAccounts) {
  for (var i = 0; i < srchTwtrClbrts.length; i++) {
      var order = Math.floor(Math.random() * 1000) + 1 
      srchTwtrClbrts[i].order = order;
  }

  srchTwtrClbrts.sort(function (a, b) {
      return (a.order - b.order);
  })

  for (var i = 0; i < srchTwtrClbrts.length; i++) {
      window.open(srchTwtrClbrts[i].url);
  }

})

在 w3schools 页面上，您需要单击运行 »观看以下内容：

点击

然后为 3 个字段中的每一个选择内容。

如果它有帮助，我怀疑我的问题是没有正确定位这条线：

var a=$("#searchSince").val(),b=$("#searchUntil").val(),c=$("#searchLiveOrTop").val();

由于生成的 URL 一直说“未定义”

我愿意接受所有建议，甚至完全修改这个脚本，所以请随时提出任何建议。
欢迎所有建议，因为它们都有很大帮助。

先感谢您。

标签： javascriptjquery

解决方案

问题是当表单数据发生变化时你永远不会更新srchTwtrClbrts，所以你需要监听文本框的任何变化并更新srchTwtrClbrts.

我将formChange类添加到 maindiv中，然后听取更改：

<div class="formChange" name="searchCelebrities" id="searchCelebrities" style="display: flex; width: 400px; margin: 15px; height: 28px; text-align: center; border-radius: 5px; border: 1px gray dotted; background-color: #e2e2e2; padding: 5px 0 0 5px;">
        <span style="position: relative; top: 1px; margin-right: 5px;">from:</span>
        <form id="form-searchSince" style="margin-right: 5px;">
            <input type="text" id="searchSince" class="SrchTwtr" style="width: 100px !important; margin-right: 5px;">
        </form>
        <span style="position: relative; top: 1px; margin-right: 5px;">until:</span>
        <div id="form-searchUntil" style="margin-right: 5px;">
            <input type="text" id="searchUntil" class="SrchTwtr" style="width: 100px !important; margin-right: 5px;">
        </div>
        <form id="form-searchLiveOrTop">
            <label for="searchLiveOrTop"></label>
            <select id="searchLiveOrTop" name="searchLiveOrTop" class="SrchTwtr" style="width: 65px !Important; font-size: 0.85em !Important; padding-left: 0px !Important;">
                <option value=" ">Top</option>
                <option value="&f=live">Latest</option>
                <option value="&f=user">People</option>
                <option value="&f=image">Photos</option>
                <option value="&f=video">Videos</option>
            </select>
        </form>
</div>

在脚本中，我创建了一个函数来更新srchTwtrClbrts发生任何更改的时间：

var a = $("#searchSince").val(), b = $("#searchUntil").val(), c = $("#searchLiveOrTop").val();

var srchTwtrClbrts = [
    { url: "https://twitter.com/search?q= from:ddlovato since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:jtimberlake since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:selenagomez since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:ArianaGrande since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:taylorswift13 since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:rihanna since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:katyperry since:" + a + " until:" + b + " " + c + " " },
    { url: "https://twitter.com/search?q= from:justinbieber since:" + a + " until:" + b + " " + c + " " },
];

$(".formChange").change(function () {
    var a = $("#searchSince").val(), b = $("#searchUntil").val(), c = $("#searchLiveOrTop").val();
    upadteUrL(a, b, c);
});

function upadteUrL(a, b, c) {
    srchTwtrClbrts = [
        { url: "https://twitter.com/search?q= from:ddlovato since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:jtimberlake since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:selenagomez since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:ArianaGrande since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:taylorswift13 since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:rihanna since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:katyperry since:" + a + " until:" + b + " " + c + " " },
        { url: "https://twitter.com/search?q= from:justinbieber since:" + a + " until:" + b + " " + c + " " },
    ];
}

$('#searchTwitterAccounts').click(function (searchTwitterAccounts) {
    for (var i = 0; i < srchTwtrClbrts.length; i++) {
        var order = Math.floor(Math.random() * 1000) + 1
        srchTwtrClbrts[i].order = order;
    }

    srchTwtrClbrts.sort(function (a, b) {
        return (a.order - b.order);
    })

    for (var i = 0; i < srchTwtrClbrts.length; i++) {
        window.open(srchTwtrClbrts[i].url);
    }
})

推荐阅读