执行JS函数并从html定义变量

Question

我所拥有的页面是通过jQuery收集大量数据的页面。 我试图将显示的结果数量限制为一个变量，并更改列表上显示的结果以创建假页面效果。 一切都通过相同的JS函数运行，并依靠1个变量使一切正常运行。 简单。 我删除了所有多余的代码以简化一切

function myFunction() { var page = 1; console.log(page); }

我正在寻找一种调用此函数的方法，但是从html内更改变量“ page”。 类似于以下内容：

<a href="" onclick="myFunction(page=2)"> 2 </a>

我一直在谷歌上寻找（并且仍然是）我只是找不到我想要的东西。 我正在尝试避免多页/刷新，因为此元素将用于同一页上的较大项目。

更新：我设法将预期的值传递给了像这样的JS函数...

function myFunction(page) { console.log(page); }

...和...

<input type='button' onclick='myFunction(value)' value='input page number'>

这似乎是我需要做的最简单的方法，您认为呢？ 谢谢您的帮助，顺便说一句。

Answer 1

当然，您可以将data-url属性添加到标记中，然后在.link类中进行选择，以获取属于该类的每个元素的data-url属性。

我正在尝试避免多页/刷新，因为此元素将用于同一页上的较大项目。

听起来您还需要AJAX解决方案。

 $(document).ready( function() { //Add this on your call.html page $(".link").click(function() { //location of test JSON file var root = 'https://jsonplaceholder.typicode.com'; //your custom attribute acting as your 'variable' var page = $(this).attr('data-url'); console.log("page = " + page); //remove any previous html from the modal $(".modal-content").empty(); //send a request to the server to retrieve your pages $.ajax( { method: "GET", //this should be updated with location of file url: root + '/posts/' + page, //if server request to get page was successful success: function(result) { console.log(result); var res = result; var content = "<div class='panel-default'><div class='panel-heading'><h3 class='panel-title'>" + res.title + "</h3></div><i><div class='panel-body'>''" + res.body + "''</i></div><p><u> Master Yoda, (2017)</u></p><p class='page'> Page: " + page + "</p></div>"; $(".modal-content").html(content); }, //otherwise do this error: function(result) { $(".modal-content").html("<div class='error'><span><b> Failed to retrieve data </b></span><p> try again later </p></div>"); } }); }); }); 

 .error { border: 2px dotted red; margin: 5px; } a { font-size: 20px; } .page { text-align: left; padding: 0 15px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <a class="link" data-url="1" data-toggle="modal" data-target="#Modal" href="test.html">Show Page 1</a> <br /> <a class="link" data-url="2" data-toggle="modal" data-target="#Modal" href="">Show Page 2</a> <div id="Modal" class="modal fade text-center"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div> 

Answer 2

为此，您需要将页面变量移动为myFunction的参数。

function myFunction(page) { console.log(page); }

然后，您只需输入您想要的任何页码即可

<a href="" onclick="myFunction(2)"> 2 </a>

Answer 3

我似乎已经知道如何做到这一点。 我想避免在项目中使用大量的库，只是想使事情简单，使用上述答案作为指导（以及更多的挖掘工作），基本上我的最终目标是使用jQuery获得一长串数据，并将这些数据格式化为多页列表（为此我使用了一个表格进行格式化）。 假设这是一个名称列表。 JSON结果输出为：

[{"first_name":"Bob"},{"last_name":"Jones"}]     // (key, value)

但是，当我将其传递给HTML Table时，它仅在一个列表中显示了数千个结果，而格式化列表是一件很痛苦的事情。 这是我的解决方案：

<script>
var pageNum = "";     // define Page Number variable for later.
var resLimit = 35;    // variable to specify the number of results per page
function updateList () {
    $.getJSON(" Location of JSON results ", function(data) {
        var pageCount = Math.round(data.length/resLimit);    // calculate number of pages
        var auto_id = ((pageNum-1)*resLimit)    // use variables to give each result an id
        var newListData = "";    // define this for use later

然后定义“新列表数据”并将其传递到HTML表：

var newListData = "";
    $.each(data.slice(auto_id, (pageNum*resLimit)), function(key, value) {
        auto_id++;
        newListData += '<tr>';
        newListData += '<td class="id">' + audo_id + '</td>';
        newListData += '<td class="id">' + value.first_name + '</td>';
        newListData += '<td class="id">' + value.last_name + '</td>';
        newListData += '</tr>';
    });
    $('# ID of table, data will replace existing rows ').html(newListData);

此时，如果将pageNum的值设置为1，则应该在列表中看到前35个结果，所有结果均带有自动递增的ID号。 如果将其更改为2并刷新页面，则应该会看到下一个35，其中ID号从第一页开始。

接下来，我需要为每个页面创建一个按钮：

$('# ID of table, data will replace existing rows ').html(newListData);
function createButtons() {
    var buttonArray = "";
    for(i=0, x=pageCount; i<x; i++) {
        buttonArray += '<input type="button" onclick="changePage(' 
            + (i + 1) + ')" value="' + (i + 1) + '">';
        }
    $('#  ID of Span tags for button container  ').html(buttonArray);   }
createButtons();
});    }
</script>

然后创建changePage（）和一个函数，以自动刷新列表中的数据而不会造成混乱

<script>
var pageNum = "";
function changePage(page) {
    if (pageNum < 1) { pageNum = 1; } // set pageNum when the page loads
    if (page > 0) { pageNum = page; } // overwrite pageNum when 'page' variable is defined
    updateList();    }
changePage();    // initialise to prevent delayed display on page load

// refresh function:
function refreshData() {
    changePage(0); //  define 'page' as 0 so that pageNum is not overwritten
    window.setTimeout(refreshData, 5000);    } // loop this function every 5 seconds to
refreshData();                            //-- keep this list populated with current data.

那应该就可以做到！ 至少它对我有用，但我可能错过了一些东西（希望不是大声笑）。 希望这可以帮助某人，其中涉及很多事情，可以在其他地方推论和使用:)

谢谢大家的帮助。