如果输入标签中的ID由php / mysql输出生成，如何将ID传递给JavaScript（getElementByID）？

Question

在此先感谢您的帮助。

我正在尝试搜索以下所有ID，以查看数据是否已由用户选择。

<input id=\"".$row['childName']."\" type=\"checkbox\" name=\"foodData[]\"  value=\""$row['foodCalories']"\"><label> If this is selected </label>

<label><input id=\"".$row['careHome']."\" type=\"checkbox\" name=\"lifestyle\"  value=\"".$row['sportActivities']."\"\>this should be checked too.. </label>

<script> function lastResort(){
    var x = document.getElementById(\"".$row['childName']."\).value; \\this is unrecognised

    var y = document.getElementById(\"".$row['careHome']."\"); \\ unrecognised

    (... function to checkboxes..) <-- this part works
} </script>;

我还发现，如果我妥协并且为所有值保留相同的ID（如word = \\"eat\\" ），它将仅对结果的第一行运行该函数。

Answer 1

首先，我建议您不要以字符串形式输出。 尝试使用简单的视图方法渲染事物。 它使您可以更轻松地编辑HTML，并避免所有未加引号的字符等错误。您可以得到什么。

class Controller 
{
    public function makePartial($file, $vars = []) 
    {
        extract($vars);
        ob_start();
           include($file);
        $output = ob_get_clean();
        return $output;
    }
    public function render() 
    {
        return '';
    }
}

然后在您看来，您将拥有类似的东西

view.html

<input id="<?= $row['childName'] ?>" type="checkbox" name="foodData[]"  value="<?= $row['foodCalories'] ?>"\><label> If this is selected </label>

<label><input id="<?= $row['careHome'] ?>" type="checkbox" name="lifestyle"  value="<?= $row['sportActivities'] ?>"\>this should be checked too.. </label>

<script>
    function lastResort(){
        var x = document.getElementById("<?= $row['childName']?> ").value; \\this is unrecognised

    var y = document.getElementById("<?= $row['careHome']?>").value; \\ unrecognised

    (... function to checkboxes..) <-- this part works
};
</script>

您可以通过扩展控制器进行渲染

class foodController extends Controller 
{
    protected function getRows() 
    {
       // magic to get rows
       return $rows;
    }
    public function render() 
    {
       $output = [];
       $rows = $this->getRows();
       foreach($rows as $row) {
          $output[] = $this->makePartial('view.html', ['row' => $row]);
       }
       return implode('', $output);
    }
}

最终会得到类似的输出

 <input id="childName" type="checkbox" name="foodData[]" value="250"/><label> If this is selected </label> <label><input id="careHome" type="checkbox" name="lifestyle" value="discus"/>this should be checked too.. </label> <button id="clickme">Click me</button> <script> function lastResort(){ var x = document.getElementById("childName").value; //this is unrecognised var y = document.getElementById("careHome").value; //unrecognised console.log(x, y); }; document.getElementById('clickme').addEventListener('click', lastResort); </script> 

通过将渲染流分离为单个ID，或将其存储在单独的数组中，就可以完成所需的操作。

我建议将ID存储在单独的数组中，并在单独的视图中呈现javascript。

row.html

<input id="<?= $childName ?>" type="checkbox" name="foodData[]"  value="<?= $foodCalories ?>"\><label> If this is selected </label>

<label><input id="<?= $careHome ?>" type="checkbox" name="lifestyle"  value="<?= $sportActivities ?>"\>this should be checked too.. </label>

javascript.html

<script>
    function lastResort(){
         <?php foreach($rows as $row): ?>
             if(document.getElementById('<?=$row['childName']?>').checked) {
                   document.getElementById('<?=$row['careHome']?>').checked = true;
             }
             else {
                   document.getElementById('<?=$row['careHome']?>').checked = false;
             }
         <?php endforeach; ?>
    }
};
</script>

可以渲染的

class foodController extends Controller 
{
    protected function getRows() 
    {
       // magic to get rows
       return $rows;
    }
    public function render() 
    {
       $output = [];
       $rows = $this->getRows();
       foreach($rows as $row) {
          $output[] = $this->makePartial('row.html', $row);
       }
       $output[] = $this->makePartial('javascript.html', $rows);
       return implode('', $output);
    }
}

这将给出类似的输出

 <input id="childName1" type="checkbox" name="foodData[]" value="250"/><label> If this is selected </label> <label><input id="careHome1" type="checkbox" name="lifestyle" value="discus"/>this should be checked too.. </label> <BR/> <input id="childName2" type="checkbox" name="foodData[]" value="250"/><label> If this is selected </label> <label><input id="careHome2" type="checkbox" name="lifestyle" value="discus"/>this should be checked too.. </label> <BR/> <input id="childName3" type="checkbox" name="foodData[]" value="250"/><label> If this is selected </label> <label><input id="careHome3" type="checkbox" name="lifestyle" value="discus"/>this should be checked too.. </label> <BR/> <input id="childName4" type="checkbox" name="foodData[]" value="250"/><label> If this is selected </label> <label><input id="careHome4" type="checkbox" name="lifestyle" value="discus"/>this should be checked too.. </label> <BR/> <button id="clickme">Click me</button> <script> function lastResort(){ if(document.getElementById('childName1').checked) { document.getElementById('careHome1').checked = true; } else { document.getElementById('careHome1').checked = false; } if(document.getElementById('childName2').checked) { document.getElementById('careHome2').checked = true; } else { document.getElementById('careHome2').checked = false; } if(document.getElementById('childName3').checked) { document.getElementById('careHome3').checked = true; } else { document.getElementById('careHome3').checked = false; } if(document.getElementById('childName4').checked) { document.getElementById('careHome4').checked = true; } else { document.getElementById('careHome4').checked = false; } }; document.getElementById('clickme').addEventListener('click', lastResort); </script>