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.nextSiblingisnull」です。

どんなアドバイスも素晴らしいでしょう！ありがとう！

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