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の一致が一致していませんでした）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オブジェクトがあります。たとえば、liはHTMLLiElementであるため、onclickイベントはそのオブジェクトのメソッドであるため、これを使用すると、現在のオブジェクトを指します。通常の場合と同じです。 JavaScriptオブジェクト。

これにより、phpが呼び出しをエコーし​​やすくなり、オブジェクトの値をそのまま使用すると、QuoteEscapingが防止されます。

上記ほど厄介ではない完全なソリューションが必要な場合。そしてそれを行う適切な理由を使用する：

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 に答える