Question

我正在尝试使用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足以弄清楚问题。

我需要将submit按钮的值发送到updatefilters（）函数。有关如何做的任何建议吗？

由于

Answer 1

jQuery回答：既然你问过/.

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

你的代码略有改动（错误匹配div和ul结束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>"

Answer 2

试试这个：

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);
   });
});

Answer 3

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

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

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

这也使php更容易回应你使用对象值的调用，它会阻止Quote Escaping

如果你想要一个不像上面那样凌乱的完整解决方案。并使用适当的原因：

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上测试的其他方法更快

Answer 4

我使用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

使用javascript动态检索按钮值

4 个答案: