0

好的，这是我现在的新 javascript 代码：

var counter = <? echo $count-1 ?>;
var limit = 24;

function addInput(divName){
 if (counter >= limit)  {
      alert("You have reached the limit of adding " + counter + " inputs");
 }
 else {
      var newdiv = document.createElement('div');

      var dropDown;

      var fromPHP=<? echo $s_to_json ?>;

      for (i=0; i<fromPHP.length; i++){
        yourValue = fromPHP[i];
        dropDown = dropDown + "<option value='" + yourValue + "'>" + yourValue + "</option>";
      }
      //document.write(dropDown);
      var containerType = "<?echo $matRow['container']?>";
      var viz;

      if (containerType == "Box/Bag"){
        viz = "visible";
      }else{
        viz = "hidden";
      }

      newdiv.innerHTML = "Weight " + (counter + 1) + ": <input type='text' name='myWeights[]' class='putty' maxlength='6' /> Material " + (counter + 1) + ": <input type='text' name='myMaterials[]' class='plato' maxlength='17' value='<? echo (isset($matRow['material']) ? $matRow['material'] : '')?>' /> Container " + (counter + 1) + ": <select onchange=\"switchMain(this.nextSibling.nextSibling.id);\" name='myContainers[]' id='myContainers[]'><option value='<? echo (isset($matRow['container']) ? $matRow['container'] : '') ?>' selected><? echo (isset($matRow['container']) ? $matRow['container'] : '') ?></option>' + dropDown + '" + dropDown + "</select><div id='boxhide[]' style='visibility:" + viz + ";display:inline;'> Quantity " + (counter + 1) + ": <input type='text' name='boxnum" + (counter + 1) +"' class='boxputty' maxlength='2' /></div>";
      document.getElementById(divName).lastChild.parentNode.appendChild(newdiv);
      counter++;
 }
}

function getStyle(divName){

var temp = document.getElementById(divName).style.visibility;

return temp;
}

function switchMain(divName){

//var e = document.getElementById("myContainers[]");
//var strUser = e.options[e.selectedIndex].value;

//console.debug(strUser);
//console.debug(divName);

if (strUser == "Box/Bag"){

    var current = getStyle(divName);

    //console.debug(current);

    document.getElementById(divName).style.visibility = "visible";
}else{
    document.getElementById(divName).style.visibility = "hidden";
}
}

function removeInput(divName){

if (counter<=1){
    alert("You cannot remove any more weights from this job.");
}
else {
    var olddiv = document.getElementById(divName);
    var lastChild = olddiv.lastChild;
        if (lastChild && lastChild.parentNode && lastChild.parentNode.removeChild){
            lastChild.parentNode.removeChild(lastChild);
            counter--;
        }
}
}

这是调用它的脚本部分：

Weight <? echo $count ?>: <input type="text" class="putty" name="myWeights[]" maxlength="6" value="<? echo $read ?>" autofocus /> Material <? echo $count ?>: <input type="text" class="plato" name="myMaterials[]" maxlength="17" value="<? echo (isset($matRow["material"]) ? $matRow["material"] : "") ?>" />
        Container <? echo $count ?>: <select onchange="switchMain(this.nextSibling.nextSibling.id);" name="myContainers[]" id="myContainers[]">
            <option value="<? echo (isset($matRow["container"]) ? $matRow["container"] : "") ?>" selected><? echo (isset($matRow["container"]) ? $matRow["container"] : ""); ($matRow['container'] == 'Box/Bag' ? $vishid = 'visible' : $vishid = 'hidden') ?></option>
                <?

            <div id='boxhide[]' style="visibility:<? echo $vishid ?>;display:inline;">
            Quantity <? echo $count ?>: <input type="text" name="boxnum[]" class="boxputty" maxlength="2" />
            </div>


    <input type="button" alt='Add Weight' title='Add Weight' value="+" onClick="addInput('dynamicInput');">
    <input type="button" alt='Remove Weight' title='Remove Weight' value="-" onClick="removeInput('dynamicInput');">

我剪掉了所有不必要的部分。

截至目前，当用户单击以添加一行时，它会将其放置在错误的位置，但我确信我可以像以前一样对其进行排序。更大的问题是，通过单击“+”按钮添加的任何行在更改由 switchMain() 检查的下拉菜单时都会出错。错误显示“TypeError：this.nextSibling.nextSibling 为空”。

任何建议都会很棒！谢谢！

4

1 回答 1

1

因此，这里有一些明显但不一定容易听到的建议，用于清理您的编码方法以使您的生活更轻松，并可能使您的问题在未来更容易回答：

干净地分离php和js

尽可能将 php 和 javascript 分开。如果您必须将数据从 js 传递到 php，我建议采用更规范的方法，预先初始化所有 php 变量，然后稍后在 javascript 中使用它们：

var counter = <? js_escape($count-1); ?>;
var fromPHP=<? js_escape($s_to_json); ?>; // Null if not available
var jsVarFromPhp = <?php escape($necessary_var);?>;
var anotherVariable = <?php escape($another_var);?>;
var materialArray = <? echo json_encode($material_array);?>;

// then the js actually does stuff with javascript variables, ideally wrapped within a function, no php in the logic of your javascript.

隔离 javascript 行为

当您处理这样的复杂语言组合时，通常最好将 php 行为与 javascript 行为隔离开来。 http://jsfiddle.net非常适合，将您想要的 js 行为和您期望的 html 放入测试用例中。您必须将您的 php 变量转换为它们的值，但这会简化测试用例，因此建议您自己调试。

改掉在 html 中直接使用 echo 的习惯

您直接在 html 中回显内容。这最终会导致 XSS。省去麻烦并使用模板引擎（如果只是一个小项目，那就是一个小引擎）。Smarty 很受欢迎，而且很有效。如果您觉得出于某种原因必须使用原生 php，请尽量避免 html 中的 php 逻辑，并给自己一个包装函数以使 php 尽可能干净，例如：

function h($dirty){
    echo htmlentities($dirty, ENT_QUOTES | ENT_IGNORE, 'UTF-8');
}

像这样使用：

<input value='<?php h($input_value);?>'>

不过，我仍然推荐模板引擎方法。

于 2013-02-05T16:38:53.923 回答