jquery 如何使用文本字段中的片段构建链接，但在JavaScript中对其进行随机化，然后在各自的标签页上打开每个片段

yqkkidmi 于 2022-12-18 发布在 jQuery

关注(0)|答案(1)|浏览(91)

我试图让一个JavaScript能够随机化几个链接**，这些链接必须用从文本字段**中提取的片段构建，然后通过单击按钮在各自的选项卡上打开每个链接。
我知道两种不同的JavaScript可以分别完成这两件事：

a）使用从文本字段获取的片段构建URL
B）随机化几个链接，然后在其自己的选项卡上打开每个链接

但是我找不到一种有效的方法来将这两种方法混合在一个JavaScript中。
我试过几种方法来实现这个目标，但我根本不是Maven，所以我一直失败。
为了让这篇文章更容易被理解，我做了一个小提琴，但不幸的是，小提琴的链接通常在许多网站上被屏蔽，因此我使用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页面，您需要单击Run以观看以下内容：

然后为3个字段中的每一个选择内容。
如果这有帮助的话，我怀疑我的问题是没有正确定位这一行：

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

因为生成的URL一直显示“未定义”
我愿意接受所有的建议，甚至完全修改这个脚本，所以请随时提出任何建议。
所有的建议都是受欢迎的，因为他们都帮助很大。
先谢谢你。

jquery

来源：https://stackoverflow.com/questions/68671282/how-to-build-links-with-fragments-taken-from-text-fields-but-within-a-javascrip

1条答案

按热度按时间

ljo96ir51#

问题是，当表单数据发生更改时，您永远不会更新srchTwtrClbrts，因此您需要侦听文本框的任何更改并更新srchTwtrClbrts。
我将formChange类添加到主div中，然后听取其更改：

<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);
    }
})

赞(0）回复(0）举报 2022-12-18

我来回答

jquery 如何使用文本字段中的片段构建链接，但在JavaScript中对其进行随机化，然后在各自的标签页上打开每个片段

1条答案

相关问题

热门标签

最新问答