Question

我正在从JSON数据创建列表视图，但是在调用了＆＃39; onclick＆＃39;来自For循环的函数，在新窗口中打开的链接将三个URL加载到浏览器的URL输入中。知道如何重新编写下面的代码只是加载一个链接，而不是基于下面的代码三个？

            <h3>Links</h3> <br>
            <ul class="list">
                <div id="timetables"></div>
            </ul>

            <script>
            var xmlhttp = new XMLHttpRequest();
            var url = "https://api.myjson.com/bins/qg69t";
            var URL_1 = "";
            var URL_2 = "";

            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var myArr = JSON.parse(this.responseText);
                    myFunction(myArr);
                }
            };
            xmlhttp.open("GET", url, true);
            xmlhttp.send();

            function myFunction(arr) {
                var out = "";
                var i;
                for(i = 0; i < arr.length; i++) {
                    URL_1 += arr[i].timetable_1_link;
                    URL_2 += arr[i].timetable_2_link;
                    console.log(arr[i].timetable_1_link);
                    out += '<div>' + arr[i].course + '</div><p><a href="#" onclick="openLinkInNewWindow_1()">' + arr[i].timetable_1_name + '</a></p><p><a href="#" onclick="openLinkInNewWindow_2()">' + arr[i].timetable_2_name + '</a></p>';
                }
                document.getElementById("timetables").innerHTML = out;
            }

            function openLinkInNewWindow_1() {
                    window.open(URL_1, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
                }

            function openLinkInNewWindow_2() {
                    window.open(URL_2, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
                }

            </script>

Answer 1

您可以从重构打开URL的函数开始，接受如下参数：

function openLinkInNewWindow_1(URL) {
                window.open(URL, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
            }

然后在for循环中传递URL以及每个链接。

function myFunction(arr) {
            var out = "";
            var i;
            for(i = 0; i < arr.length; i++) {
                URL_1 = arr[i].timetable_1_link;
                URL_2 = arr[i].timetable_2_link;
                console.log(arr[i].timetable_1_link);
                out += '<div>' + arr[i].course + '</div><p><a href="#" onclick="openLinkInNewWindow(' + URL_1 + ')">' + arr[i].timetable_1_name + '</a></p><p><a href="#" onclick="openLinkInNewWindow(' + URL_2 + ')">' + arr[i].timetable_2_name + '</a></p>';
            }
            document.getElementById("timetables").innerHTML = out;
        }

这样你只需要一个功能。另请注意，我从URL_1 + =行中删除了<。

Answer 2

使用 URL_1 + = 是罪魁祸首。每次循环运行时，它都会将新字符串附加到现有url（s）。

请从函数＆＃39; myFunction＆＃39; 中的URL_变量中删除+ =，然后使用＆＃39; =＆＃39;直接指定值。只。
更新的代码写在下面

 <h3>Links</h3> <br>
        <ul class="list">
            <div id="timetables"></div>
        </ul>

        <script>
        var xmlhttp = new XMLHttpRequest();
        var url = "https://api.myjson.com/bins/qg69t";
        var URL_1 = "";
        var URL_2 = "";

        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myArr = JSON.parse(this.responseText);
                myFunction(myArr);
            }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        function myFunction(arr) {
            var out = "";
            var i;
            for(i = 0; i < arr.length; i++) {
                URL_1 = arr[i].timetable_1_link;
                URL_2 = arr[i].timetable_2_link;
                out += '<div>' + arr[i].course + '</div><p><a href="#" onclick="openLinkInNewWindow_1()">' + arr[i].timetable_1_name + '</a></p><p><a href="#" onclick="openLinkInNewWindow_2()">' + arr[i].timetable_2_name + '</a></p>';
            }
            document.getElementById("timetables").innerHTML = out;
        }

        function openLinkInNewWindow_1() {
                window.open(URL_1, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
            }

        function openLinkInNewWindow_2() {
                window.open(URL_2, "_blank", "toolbar=yes,scrollbars=yes,resizable=yes");
            }

        </script>

您可以查看更新并正在运行的代码here

JavaScript - 呼叫点击＆＃39;功能来自For循环加载多个链接

2 个答案: