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: Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]

为什么会这样？我已经从网上复制了代码，但我可以修复它，因为我不明白这些行：

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，因为脚本语言存在于堆栈的不同部分，所以这将不起作用。

在我看来，有两种方法可以做到这一点。

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 字符串 - 请参阅从字符串中删除新行

您是正确的，正在用JavaScript 变量替换单词“count”的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 回答