Question

我有一个带有json表的页面从json api中提取信息。这很好用。现在我的问题是，在最右边的专栏中，我想要链接到我的另一个页面，这个链接将是一个独特的链接。目前，正如您可以通过代码看到的，我可以将其链接到html页面12345，但所有行都链接到此。这对哈哈没有帮助！

我理想地想要第一个按钮链接到1.html然后第二个按钮链接到2.html等等。

这是我到目前为止的代码。

          for(var i =0;i < json.results.collection1.length;i++) {

             var title = json.results.collection1[i].Name.text;

             var venue = json.results.collection1[i].Venue.text;
             var date = json.results.collection2[i].Date;
             var button = "<button class='redirect-button' data-url='12345.html'>Link</button>";



             $("#apple").append("<tbody><tr><td>"+title+"</td><td>"+venue+"</td><td>"+date+"</td><td>"+button+"</td></tr></tbody>");
           $("#apple").find(".redirect-button").click(function(){
   location.href = $(this).attr("data-url");
            });
           }

     },

显然，所有的帮助将不胜感激。谢谢山姆

Answer 1

只是解释上面的评论

您创建的链接是<button>，但实际上它只是一个字符串。因此，通过基于某些东西（例如循环中的i索引）连接字符串的URL部分，您可以将其更改为您想要的任何内容。例如：

var button = "<button class='redirect-button' data-url='" + i + " .html'>Link</button>";

这给出了一个看起来像这样的元素：

<button  class='redirect-button' data-url='0.html'>Link</button>

会给你0.html，1.html等（将data-url='" + i + " .html'更改为data-url='" + (i+1) + " .html'并获得1.html，2.html，3.html ......）

或者如果您可以更改API以在回复中为您提供正确的链接，则可以使其更具可读性：

var button = "<button class='redirect-button' data-url='" + json.results.collection2[i].LinkUrl + " .html'>Link</button>";

结果：

 <button  class='redirect-button' data-url='abcd.html'>Link</button>

假设返回被称为LinkURL并且它的值是＆＃39; abcd＆＃39;

最后，将此字符串附加到$("#apple")元素，然后添加click事件以查找data-url值并将当前浏览器位置更改为该新值。

表格列中的Json个人链接

1 个答案: