Question

好的，这是我现在的新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为null”。

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

Answer 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);?>'>

我仍然建议使用模板引擎方法。

Javascript，使多个文本隐藏文本输入visibile onchange

1 个答案:

干净地分开php和js

隔离javascript行为

不要直接在你的html