2

我正在尝试使用 AJAX 为线程/评论创建动态“页面”列表。

在 PHP 中，我查看结果并将数据库查询限制为 '$page, $page+10'

现在，我需要做的就是弄清楚如何将用户想要查看的页面发送到 PHP。

这是生成不同页面按钮的代码：

var htmlpage = "<div class='pages'><ul>"
for (i=1 ; i < pages+1 ; i++)
{
    htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(document.getElementById('page1').value);' /></li>"
}
htmlpage += "<div>"    
htmlpage += "</ul>";

*这是通过 javascript 完成的，数据通过 JSON/AJAX 调用返回。

document.getElementById('page1').value给我一个

syntax error[Break On This Error] updatefilters(document.getElementById(

错误。我尝试了不同的格式，就这样结束了。我只是不太了解javascript，无法找出问题所在。

我需要将提交按钮的值发送到 updatefilters() 函数。关于如何做的任何建议？

谢谢

4

4 回答 4

1

jQuery 回答：既然你问/。

$(document).ready(function() {
    $(document).on('click', '.submitPage', function() {
        updatefilters($(this).val());
    });
});

对您的生成代码稍作更改（不匹配 div 和 ul end BTW）我添加了 submitPage 类。如果您不喜欢这样，请改用上面的以下选择器：

$(document).on('click','.pages>ul>li>input',function(){

现在更改生成代码：

var htmlpage = "<div class='pages'><ul>";
var mystart = "<li><input type='submit' class='submitPage' id='page";
var mymid = "' value='";
var myend = "' /></li>";

for (i = 1; i < pages + 1; i++) {
    htmlpage += mystart + i + mymid + i + myend;
}
htmlpage += "</ul></div>"
于 2012-06-11T20:13:39.987 回答
0

尝试这个：

htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(document.getElementById(\'page1\').value);' /></li>";

编辑：

关于 jquery，您可以将上面的内容替换为：（假设您没有其他以“pageX”开头的输入，只有这些循环。

$(document).ready(function() {
   $("input[id^='page']").live("click",function() {
      updatefilters($(this)[0].value);
   });
});
于 2012-06-11T19:25:10.807 回答
0

请不要使用 document.getElementById 来引用您所在的对象，您的代码应该是

htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(this.value);' /></li>";

只是对此的解释 HTML 中的每一件事都有一个 JavaScript 对象 EG 你的 li 是一个 HTMLLiElement 所以你的 onclick 事件是该对象的一个​​方法所以当你使用它时它指向你当前所在的对象。与普通的一样JavaScript 对象。

这也使 php 更容易回显调用，其中您使用对象的值，因为它可以防止引用转义

如果您想要一个不像上面那样混乱的完整解决方案。并使用正确的这样做的原因：

var divPage = $(document.createElement("div"));
divPage.attr('class', 'pages');
var ulPage = $(document.createElement("ul"));
for (i=1 ; i < pages+1 ; i++)
{
     var liElement = $(document.createElement("li"));
     var inputElement = $(document.createElement("input"));
     input.attr('type', 'submit');
     input.attr('id', 'page'+i);
     input.val(i);
     input.click(function(){
          updateFilters($(this).val());
     });
     liElement.append(inputElement);
     ulPage.append(liElement)
}
divPage.append(ulPage);

然后打电话$("ElementIdYouAddingTo").append(divPage);

我会说我评论过在 jQuery 中使用 DOM 的用户，这document.createElement是唯一的例外，因为它比用户在 Stack Overflow 上测试的其他方法更快

于 2012-06-11T19:45:01.410 回答
0

我通过使用得到了答案this.value

这似乎很明显，尤其是通过阅读上述答案/评论，但重要的是要指出的this.value是，javascript 代码会返回单击的任何元素的值。 

        var htmlpage = "<div class='pages'><ul>"
        for (i=1 ; i < pages+1 ; i++)
            {
                if (data['page']==i) {
                    htmlpage += "<li><input type='submit' id='selected' value='"+ i +"'/></li>"
                } else {
                    htmlpage += "<li><input type='submit' id='page' value='"+ i +"' onclick='updatefilters(this.value);' /></li>"
                }
            }
        htmlpage
于 2012-07-05T18:29:40.587 回答