Question

我从API中获取了一些数据。我对API进行了两次调用，并将此输出保存在变量中。现在，我有两个链接-一个用于Data1，一个用于Data2。如果单击Data1，则应加载第一个呼叫。单击Data2显示应进行第二个呼叫。有人访问该网站时，Data1应该是默认显示的数据集。

我有一个可行的解决方案：

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(function(){
                $("#data1").click(function(e){
                    e.preventDefault();
                    var datasets = document.getElementById("datasets");
                    var html = '';
                    var i = 0;
                    var results = <?php echo json_encode($resultsD1) ?>;
                    for (const result of results) {
                        html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
                        html += '<span class="release">' + result["release"] + '</span></div></article>';
                        i++;
                    }
                    products.innerHTML = html;
                });
                $("#data2").click(function(e){
                    e.preventDefault();
                    var datasets = document.getElementById("datasets");
                    var html = '';
                    var i = 0;
                    var results = <?php echo json_encode($resultsD2) ?>;
                    for (const result of results) {
                        html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
                        html += '<span class="release">' + result["release"] + '</span></div></article>';
                        i++;
                    }
                    products.innerHTML = html;
                });
            });
        </script>

现在，如果我单击Data1，将加载正确的数据。单击Data2时也是如此。但是，如何在加载网站时将Data1设置为默认值？而且我的代码似乎构造得很糟糕。我重复两次整个for循环...

Answer 1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function(){
    function setData(dataset_type){
        var html = '';
                    var i = 0;
        var products = document.getElementById("datasets");
                    var results = <?php echo json_encode($resultsD1) ?>;
        if(dataset_type == 2){
            results = <?php echo json_encode($resultsD2) ?>;
        }
                    for (const result of results) {
                        html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
                        html += '<span class="release">' + result["release"] + '</span></div></article>';
                        i++;
                    }
                    products.innerHTML = html;
    }

    // Default Call onload for dataset 1
    setData(1);

            $("#data1").click(function(e){
                e.preventDefault();
                setData(1);
            });
            $("#data2").click(function(e){
                e.preventDefault();
                setData(2);
            });     
        });
    </script>

Answer 2

您需要添加逻辑以将数据加载到函数中，并在单击按钮以及页面加载时调用该函数。根据您的代码，一旦单击按钮，新数据将替换旧数据，您是否要这样做还是要保留旧数据并追加新数据？我在脚本中添加了评论，以回答上述问题

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
        
        function loadData(){
        var datasets = document.getElementById("datasets");
                    var html = '';
                    var i = 0;
                    var results = <?php echo json_encode($resultsD1) ?>;
                    for (const result of results) {
                        html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
                        html += '<span class="release">' + result["release"] + '</span></div></article>';
                        i++;
                    }
                    //products.append(html); // if you want to append data uncomment this and comment below
                    products.innerHTML = html; // if you want to replace data comment this and uncomment above
}
        
            $(function(){

// function call on page load
loadData();

                $("#data1").click(function(e){
                    e.preventDefault();
                    loadData();
                });
                $("#data2").click(function(e){
                    e.preventDefault();
                    var datasets = document.getElementById("datasets");
                    var html = '';
                    var i = 0;
                    var results = <?php echo json_encode($resultsD2) ?>;
                    for (const result of results) {
                        html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
                        html += '<span class="release">' + result["release"] + '</span></div></article>';
                        i++;
                    }
                    products.innerHTML = html;
                });
            });
        </script>

Answer 3

您可以创建一个函数

var datasets =document.getElementById("datasets");// make it global
$( window ).load(function() {

       loadData(whichButtonCliked,datasets )
});

loadData(whichButtonCliked,datasets )
{
 e.preventDefault();

                    var html = '';
                    var i = 0;
                    var results = <?php echo json_encode($resultsD2) ?>;
                    for (const result of results) {
                        html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
                        html += '<span class="release">' + result["release"] + '</span></div></article>';
                        i++;
                    }
                    products.innerHTML = html;
}

并在单击时调用此功能，现在必须确定单击哪个按钮的条件

从api获取点击数据

3 个答案: