当我在对象变量中动态添加值时,它无法正常工作

时间:2017-12-28 01:35:31

标签: javascript jquery html

html代码是:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Pagination plugin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
    <script src="../jquery.twbsPagination.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <nav aria-label="Page navigation">
        <ul class="pagination" id="pagination"></ul>
    </nav>
</div>
<script type="text/javascript">
    $(function () {
	//var myVar = 5;
        var obj = $('#pagination').twbsPagination({
            totalPages: 35,
            visiblePages: 5,
            onPageClick: function (event, page) {
                //console.info(page);
            }
        });
		
        //console.info(obj.data());
		//console.log(obj);
		
    });
</script>
</body>
</html>
&#13;
&#13;
&#13;

它创造了一个分页。

这里,变量totalPages已分配值,但我想在动态搜索此网站后执行此操作

$(function () {
var myVar = 5;
    var obj = $('#pagination').twbsPagination({
        totalPages: null,
        visiblePages: 5,
        onPageClick: function (event, page) {
            //console.info(page);
        }
    });
    obj[totalPages] = myVar; //or
    //obj.totalPages = myVar;
    //console.info(obj.data());
    //console.log(obj);

});

但是,它不起作用,没有显示任何错误,没有显示任何内容。这有什么不对?我看到,我们可以用这种方式分配对象变量的值。

1 个答案:

答案 0 :(得分:0)

您的问题是,您要向$('#pagination')添加属性,而不是编辑.twbsPagination()选项。

您无法按照您尝试的方式编辑该选项。你需要一种不同的方法。

解决此问题的最简单方法是在变量对象中包含变量:

$(function () {
    var myVar = 5;
    var obj = $('#pagination').twbsPagination({
        totalPages: myVar, /* I changed here */
        visiblePages: 5,
        onPageClick: function (event, page) {
            //console.info(page);
        }
    });
    obj[totalPages] = myVar; //or
    //obj.totalPages = myVar;
    //console.info(obj.data());
    //console.log(obj);
});

但是,如果您不能,则需要按照动态总页数下的documentation

var $pagination = $('#pagination');
var defaultOpts = {
  visiblePages: 5,
  onPageClick: function(event, page) {
    //console.info(page);
  }
};
$pagination.twbsPagination(defaultOpts);

/* Then when you want to change it */
var myVar = 5;
var currentPage = $pagination.twbsPagination('getCurrentPage');
$pagination.twbsPagination('destroy');
$pagination.twbsPagination($.extend({}, defaultOpts, {
  startPage: currentPage,
  totalPages: myVar
}));

如果您还有其他问题,请与我们联系!