1

フォームにフィールドを追加するためにjqueryを使用しています。「追加」ボタンを使用して「繰り返し可能な」フィールドを追加します。

コードは

       $(".add-attacker-scores").click(function() { 

            count = count + 1;

            $('#atacker_score_items').append('<li><span class="sort hndle"><label>team :<input type="text" name="attacker_scores[' + count + '][team]" size="30" value=""/></label><label>flags :<input type="text" name="attacker_scores[' + count + '][flags]" size="10" value=""/></label><label>phone homes :<input type="text" name="attacker_scores[' + count + '][phone]" size="10" value=""/></label><label>Injects :<input type="text" name="attacker_scores[' + count + '][injects]" size="10" value=""/></label><span class="remove">Remove</span></li>');

            var temp = <? echo implode('',explode("\n",Print_attacker_scores('count') )); ?>;
                temp = temp.replace(/count/g, count);
                $('#atacker_score_items').append(temp);

            return false;
        });

Print_attacker_scoresのコードは次のとおりです。

function Print_attacker_scores($cnt, $p = null) {
if ($p === null){
    $a = $b = $c = $d = '';
}else{
    $a = $p['team'];
    $b = $p['flags'];
    $c = $p['phone'];
    $d = $p['injects'];
}
return  <<<HTML
<li><span class="sort hndle"></span>
    <label>team :
    <input type="text" name="attacker_scores[$cnt][team]" size="30" value="$a"/>
    </label>

    <label>flags :
    <input type="text" name="attacker_scores[$cnt][flags]" size="10" value="$b"/></label>

    <label>phone homes :
    <input type="text" name="attacker_scores[$cnt][phone]" size="10" value="$c"/></label>

    <label>injects :
    <input type="text" name="attacker_scores[$cnt][injects]" size="10" value="$d"/></label>

    <span class="remove">Remove</span>
</li>
HTML
;
}

Firefoxでは機能しますが、Chromeでは機能しません。

次に、エラーがスローされることに気付きました。NS_ERROR_XPC_BAD_CONVERT_JS：JavaScript引数arg0を変換できませんでした[nsIDOMDocumentFragment.appendChild]

なぜこれが起こっているのですか？Web全体からコードをコピーしましたが、次の行がわからないため、修正できます。

var temp = <? echo implode('',explode("\n",Print_attacker_scores('count') )); ?>;
                temp = temp.replace(/count/g, count);

つまり、これはPrint_scores_functionによって生成されたhtmlを読み取り、各行で配列を作成します。次に、配列内のすべての項目を含む文字列を生成します。次に、カウント数を置き換えます¿ なぜそうなっているのかわかりません。たぶんそれをもっと簡単にする別の方法がありますか？

（/ count / g、count）は正規表現ですか？

私は何が間違っているのですか？

4

1 に答える 1

1

jQueryエラーを再現できないため、これは完全な答えではありません。ただし、現状では、JavaScriptからPHPを呼び出しているようですが、スクリプト言語はスタックのさまざまな部分に存在するため、機能しません。

私が見ているように、これを行うには2つの方法があります。

PHPの方法

次のようなJavaScript関数を生成するPHPファイルを用意します。

<?php
function Print_attacker_scores($cnt, $p = null) {
  if ($p === null){
    $a = $b = $c = $d = '';
  } else{
    $a = $p['team'];
    $b = $p['flags'];
    $c = $p['phone'];
    $d = $p['injects'];
  }

  $html = <<<HTML
<li><span class="sort hndle"></span>
<label>team :<input type="text" name="attacker_scores[$cnt][team]" size="30" value="$a"/></label>
<label>flags :<input type="text" name="attacker_scores[$cnt][flags]" size="10" value="$b"/></label>
<label>phone homes :<input type="text" name="attacker_scores[$cnt][phone]" size="10" value="$c"/></label>
<label>injects :<input type="text" name="attacker_scores[$cnt][injects]" size="10" value="$d"/></label>
<span class="remove">Remove</span>
</li>
HTML;

  return preg_replace('/\s\s+/', ' ', $html);
}
?>
<script type="text/javascript">
var count = 0;

$(".add-attacker-scores").click(function() {
  count++;

  var temp = '<? echo Print_attacker_scores('count'); ?>';
  temp = temp.replace(/count/g, count);
  $('#atacker_score_items').append(temp);

    return false;
});
</script>

var temp =ここで、JavaScript文字列としてのマークアップが必要なため、割り当ての前後に引用符を追加しました。関数が無効な複数行のJavaScript文字列を返していたため、関数は改行も削除するようになりました。文字列から新しい行を削除するを参照してください。

「count」という単語のすべての出現箇所（一部）を、関数が呼び出されるたびにインクリメントされるJavaScript変数にtemp.replace(/count/g, count)置き換えているのは正しいことです。gcount

このPHPスクリプトは、PHPプロセッサモジュールを備えたWebサーバーによって提供されると、有効なJavaScriptになります。

<script type="text/javascript">
var count = 0;
$(".add-attacker-scores").click(function() {
  count ++;

  var temp = '<li><span class="sort hndle"></span> <label>team :<input type="text" name="attacker_scores[count][team]" size="30" value=""/></label> <label>flags :<input type="text" name="attacker_scores[count][flags]" size="10" value=""/></label> <label>phone homes :<input type="text" name="attacker_scores[count][phone]" size="10" value=""/></label> <label>injects :<input type="text" name="attacker_scores[count][injects]" size="10" value=""/></label> <span class="remove">Remove</span> </li>';
  temp = temp.replace(/count/g, count);
  $('#atacker_score_items').append(temp);

    return false;
});
</script>

HTMLで使用したもの

<ul id="atacker_score_items" class="custom_repeatable ui-sortable"></ul>
<a href="#" class="add-attacker-scores">add more</a>​

このデモを作成するには

（純粋な）JavaScriptの方法

生成されたHTMLを既に含み、「カウント」→数値変数の置換を処理する既存の関数を使用します。このバージョンでは、PHP関数呼び出しや正規表現は必要ありません。

var count = 0;

$(".add-attacker-scores").click(function() { 
    count++;

    $('#atacker_score_items').append('<li><span class="sort hndle"><label>team :<input type="text" name="attacker_scores[' + count + '][team]" size="30" value=""/></label><label>flags :<input type="text" name="attacker_scores[' + count + '][flags]" size="10" value=""/></label><label>phone homes :<input type="text" name="attacker_scores[' + count + '][phone]" size="10" value=""/></label><label>Injects :<input type="text" name="attacker_scores[' + count + '][injects]" size="10" value=""/></label><span class="remove">Remove</span></li>');

    return false;
});​

お役に立てれば！問題を再現できなかったため、JavaScriptエラーが引き続き発生する場合はお知らせください。

于 2012-11-26T20:31:53.990 に答える