生成具有唯一 id 或名称或类的特定 div？使用 PHP/Javascript答案

【问题标题】：Generate a certain div with unique id or name or class? with PHP/Javascript生成具有唯一 id 或名称或类的特定 div？使用 PHP/Javascript
【发布时间】：2017-07-14 05:38:44
【问题描述】：

下面的代码显示了单击按钮添加部分时我想要生成的 div。我想为每个部分唯一地生成它，这样它就不会完全复制它，否则它会弄乱数据。

调查内容.php

<div id='sform' class='tab-pane fade'>
           <br />
           <div class='col-md-12' id='clone-parent'>

               <!-- it is the following portion of HTML that is to be replicated? -->

               <div class='col-md-10 clone-section'><!-- removed ID, added new class -->
                   <div class='panel-group'>
                       <div class='panel panel-default'>
                           <div class='panel-heading'>Section 1</div><!-- this needs to change progammatically or via CSS-->
                           <div class='panel-body'>


        <b>Number of Questions: </b>


                <span id="ctr_num"> <input id="q_num" class="form-control" style="width:50px;" name="q_num" size="2" placeholder="#"/></span>
                <br>
                 <b>Select Category</b>

                <select class="form-control" style="width: 150px;" id="categorydd" name="catdd" onChange="change_category()">

                    <option>-Please Select One-</option>

                    <?php
                    $query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID IS NULL");
                    while($row=mysqli_fetch_array($query)) {
                        ?>
                        <option value="<?php echo $row["category_id"]; ?>"><?php echo $row["categoryname"]; ?></option>

                        <?php
                    }
                    ?>

                </select><br>
                               <b>Select Subcategory</b>
                               <div id='subcategory'>

                    <select class="form-control" style="width: 150px;">

                        <option>-Please Select One-</option>
                    </select>
                                   <br />
                               </div>
                               <p hidden>Select Questions</p>
                               <br />
                               <div id='question'></div><!-- assigned as a class rather than id - can be targeted using querySelectorAll etc -->
                               <br />
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>

    <hr>


   <div class="col-md-2">
   <input type="submit" name="addsection" class="btn btn-default" value="Add Section" id="addsection" />

   </div>

我的问题是 div 里面的代码，它太动态了。这是我的代码的完整外观，包括用于子类别和问题的 div id 后面的 php 代码。

调查内容.php

    <div id='sform' class='tab-pane fade'>
           <br />
           <div class='col-md-12' id='clone-parent'>

               <!-- it is the following portion of HTML that is to be replicated? -->

               <div class='col-md-10 clone-section'><!-- removed ID, added new class -->
                   <div class='panel-group'>
                       <div class='panel panel-default'>
                           <div class='panel-heading'>Section 1</div><!-- this needs to change progammatically or via CSS-->
                           <div class='panel-body'>


        <b>Number of Questions: </b>


                <span id="ctr_num"> <input id="q_num" class="form-control" style="width:50px;" name="q_num" size="2" placeholder="#"/></span>
                <br>
                 <b>Select Category</b>

                <select class="form-control" style="width: 150px;" id="categorydd" name="catdd" onChange="change_category()">

                    <option>-Please Select One-</option>

                    <?php
                    $query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID IS NULL");
                    while($row=mysqli_fetch_array($query)) {
                        ?>
                        <option value="<?php echo $row["category_id"]; ?>"><?php echo $row["categoryname"]; ?></option>

                        <?php
                    }
                    ?>

                </select><br>
                               <b>Select Subcategory</b>
                               <div id='subcategory'>

                    <select class="form-control" style="width: 150px;">

                        <option>-Please Select One-</option>
                    </select>
                                   <br />
                               </div>
                               <p hidden>Select Questions</p>
                               <br />
                               <div id='question'></div><!-- assigned as a class rather than id - can be targeted using querySelectorAll etc -->
                               <br />
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>

    <hr>


   <div class="col-md-2">
   <input type="submit" name="addsection" class="btn btn-default" value="Add Section" id="addsection" />

   </div>
   </div>

    <br>

<div class="col-md-12">
    <div class=col-md-1><input type="submit" name="submit" id="btnSaveSurvey" class="btn btn-success" value="Submit" /></div>


                <div class=col-md-1><input type="button" class="btn btn-danger" value="Reset Survey" /> </div>
</div>




</body>



</html>




<script type="text/javascript">

    function showUser(str,id) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    /* use id supplied */
                    document.getElementById(id).innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET","hay.php?q="+str,true);
            xmlhttp.send();
        }
    }

    function change_category()
    {
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php?category="+document.getElementById("categorydd").value,false);
        xmlhttp.send(null);
        document.getElementById("subcategory").innerHTML=xmlhttp.responseText;


        if(document.getElementById("categorydd").value=="Select")
        {
        document.getElementById("question").innerHTML="<select><option>Select</option></select>";
        }

        //alert(document.getElementById("categorydd").value);
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php?main=1&subcategory="+document.getElementById("categorydd").value +"&cnt="+document.getElementById("q_num").value,false);
        xmlhttp.send(null);
        document.getElementById("question").innerHTML=xmlhttp.responseText;
    }


    function load_questions(){

        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php??main=1&subcategory="+document.getElementById("subcategorydd").value +"&cnt="+document.getElementById("q_num").value,false);
        xmlhttp.send(null);
        document.getElementById("question").innerHTML=xmlhttp.responseText;


    }

    //subcat level
    function addQues()
    {
        var c = "insertQuesHere" + (parseInt(document.getElementById("q_num").value) + 1).toString();
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php?main=0&addQues=yes&subcategory="+document.getElementById("subcategorydd").value+"&cnt="+document.getElementById("q_num").value,false);
        xmlhttp.send(null);
        //alert("insertQuesHere" + document.getElementById("q_num").value .toString());

        document.getElementById(c).innerHTML= xmlhttp.responseText;

        //alert("ajax.php?addQues=yes&subcategory="+document.getElementById("subcategorydd").value+"cnt="+document.getElementById("q_num").value);

        document.getElementById("q_num").value = parseInt(document.getElementById("q_num").value) + 1;

    }
    // category level
    function addQues_Cat()
    {

        var c = "insertQuesHere" + (parseInt(document.getElementById("q_num").value) + 1).toString();
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax.php?main=1&addQues=yes&subcategory="+document.getElementById("categorydd").value+"&cnt="+document.getElementById("q_num").value,false);
        xmlhttp.send(null);
        //alert("insertQuesHere" + document.getElementById("q_num").value .toString());

        document.getElementById(c).innerHTML= xmlhttp.responseText;

        //alert("ajax.php?addQues=yes&subcategory="+document.getElementById("subcategorydd").value+"cnt="+document.getElementById("q_num").value);

        document.getElementById("q_num").value = parseInt(document.getElementById("q_num").value) + 1;


    }

    function checkValues()
    {

        var sameValue = false;
        var cnt = parseInt(document.getElementById("q_num").value);

        for (var i = 1; i <= cnt; i++)
        {
            var a = "question_dropdown"+i.toString();
            for (var j = 1; j <= cnt; j++)
            {
                var b = "question_dropdown"+j.toString();
                if(document.getElementById(a).value ==  document.getElementById(b).value && i != j)
                    sameValue = true;
            }
        }

        if(sameValue == true) {
            alert("No duplicate questions allowed.");
            return false;
        }
        else
            return true;
    }

    function delQues()
    {

        var a = "ques"+document.getElementById("q_num").value.toString();
        //alert(a);
        var element = document.getElementById(a);
        element.outerHTML = "";
        delete element;


        document.getElementById("q_num").value = (document.getElementById("q_num").value - 1);

    }


    $(document).ready(function(){
        $("#execute").click(function(){
            var numQ = +$('#q_num').val();
            //Loop--
            for(var ctr=0; ctr < numQ; ctr++){
                var str = load_questions();
                $("#divQuestions").append(str);
            }
        });
    });



</script>

ajax.php（那些 div id 背后的代码）

<?php
$con = mysqli_connect("localhost","root","","imetrics");

$category= isset($_GET["category"])?$_GET["category"]:"";
$subcat=isset($_GET["subcategory"])?$_GET["subcategory"]:"";
$question=isset($_GET["subcategory"])?$_GET["subcategory"]:"";
$cnt=isset($_GET["cnt"])?$_GET["cnt"]:"";
$addQues=isset($_GET["addQues"])?$_GET["addQues"]:"";
$main=isset($_GET["main"])?$_GET["main"]:"";

if($category!=""){

    $query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID =$category ");
    echo "<select id='subcategorydd' class='form-control' style='width:150px;' name='subcatdd' onchange='load_questions()' >";
    echo "<option selected>"; echo "Select"; echo "</option>";
    while($row=mysqli_fetch_array($query))
    {
        echo "<option value='$row[category_id]'>"; echo $row["categoryname"]; echo "</option>";
    }
    echo "</select>";
}

// for loading ques under Category already
if($question !="" && $cnt!="" && $addQues!="yes" && $main == 1){
    $i = 0;
    for( $i = 1; $i <= $cnt; $i++ ){
        $query=mysqli_query($con, "SELECT question.* FROM question LEFT JOIN category AS subcategory on subcategory.category_id = question.question_subcat WHERE question.question_category = $question AND (question.question_subcat IS NULL OR subcategory.category_id IS NOT NULL)");


        echo "<form id='ques{$i}'>
        <b id='labelquestion_dropdown{$i}'>Question #{$i}</b>
        <select id='question_dropdown{$i}' class='form-control' onchange=\"showUser( this.value, 'txtHint{$i}' )\" style='width: 300px;' name='question_dropdowns{$i}'>
            <option selected>Select";

        while($row=mysqli_fetch_array($query)){
            echo "<option value='{$row['question_id']}'>" . $row["questiontitle"];
        }

        echo "
        </select>

    <div id='txtHint{$i}'><b>Person info will be listed here...</b></div>
    <br /></form>";
    }
    echo "<div id='insertQuesHere".$i."'></div>";

    echo "<a href='#add_question' onclick='return addQues_Cat();'>Add Question</a> | ";
    echo "<a href='#del_question' onclick='return delQues();'>Delete Question</a>";
}

// for loading ques under SUBCATEGORY
if($question !="" && $cnt!="" && $addQues!="yes" && $main != 1){
    $i = 0;
    for ($i = 1; $i <= $cnt; $i++)
    {
        $query=mysqli_query($con, "SELECT * FROM question WHERE question_subcat = $question ");
        echo "
    <form id='ques{$i}'>
        <b id='labelquestion_dropdown{$i}'>Question #{$i}</b>
        <select id='question_dropdown{$i}' class='form-control' onchange=\"showUser( this.value, 'txtHint{$i}' )\" style='width: 300px;' name='question_dropdowns{$i}'>
     <option selected>Select";
        while($row=mysqli_fetch_array($query))
        {
            echo "<option value='{$row['question_id']}'>" . $row["questiontitle"];
        }

        echo "
        </select>

    <div id='txtHint{$i}'><b>Person info will be listed here...</b></div>
    </form>  
    <br />";
    }

    echo "<div id='insertQuesHere".$i."'></div>     ";

    echo "<a href='#add_question' onclick='return addQues();'>Add Question</a> | ";
    echo "<a href='#del_question' onclick='return delQues();'>Delete Question</a>";
}


//add ques
if($subcat !="" && $addQues=="yes" && $cnt != "")
{
    $i = 0;
    $num = $cnt + 1;
    //echo $num;
    if($main == 1)
    {

        $query=mysqli_query($con, "SELECT question.* FROM question LEFT JOIN category AS subcategory on subcategory.category_id = question.question_subcat WHERE question.question_category = $question AND (question.question_subcat IS NULL OR subcategory.category_id IS NOT NULL)");
        echo "
        <form id='ques{$num}'>
        <b id='labelquestion_dropdown{$num}'>Question #{$num}</b>
        <select id='question_dropdown{$num}'". ($cnt + 1) ." class='form-control' onchange=\"showUser( this.value, 'txtHint{$num}' )\" style='width: 300px;' name='question_dropdowns{$num}'>
        <option selected>Select";
        while($row=mysqli_fetch_array($query))
        {
            echo "<option value='{$row['question_id']}'>" . $row["questiontitle"];

        }
        echo
        "</select>

      <div id='txtHint{$num}'><b>Person info will be listed here...</b></div>
          <br /></form>";

        echo "<div id='insertQuesHere".($cnt + 2)."'></div>";
    }

    else if ($main ==0)
    {
        $query=mysqli_query($con, "SELECT * FROM question WHERE question_subcat = $question ");
        echo "
         <form id='ques{$num}'>
        <b id='labelquestion_dropdown{$num}'>Question #{$num}</b>
        <select id='question_dropdown{$num}' class='form-control' onchange=\"showUser( this.value, 'txtHint{$num}' )\" style='width: 300px;' name='question_dropdowns{$num}'>
        <option selected>Select";
        while($row=mysqli_fetch_array($query))
        {
            echo "<option value='{$row['question_id']}'>" . $row["questiontitle"];

        }
        echo
        "</select>

      <div id='txtHint{$num}'><b>Person info will be listed here...</b></div>
          <br /></form>";

        echo "<div id='insertQuesHere".($cnt + 2)."'></div>";
    }
    //
    //echo "<a href='#add_question' onclick='return addQues();'>Add Question</a>";
}



?>

我想生成这个 div，因为整个添加部分按钮的用途就像我跳过逻辑条件分支的第一步。所以我需要让他们的 id 或 class 或 name 唯一吗？

【问题讨论】：

您已经从 js 传递了 cnt 并将其与数字计数一起使用以创建具有计数的唯一 ID。那么你的问题是什么？因为您已经为每个 id 使用了 {$num}。
我想在单击添加部分按钮时生成整个代码。就像在这段代码中创建另一部分一样。 @MahipalPatel
警告：使用mysqli 时，您应该使用parameterized queries 和bind_param 将用户数据添加到您的查询中。请勿使用字符串插值或连接来完成此操作，因为您创建了严重的SQL injection bug。切勿将$_POST、$_GET或任何用户数据直接放入查询中，如果有人试图利用您的错误，这可能会非常有害。
尽量避免对要复制的元素使用 ID，因为首先它可能会导致重复，然后需要更正以使其唯一，其次您不一定知道其中的新 ID当您接下来需要使用它们时，您的代码。在我看来，一个更好的解决方案——多次查看你的代码——是使用父子选择器（想想document.querySelectorAll）。您的 ajax 函数到处都是 - 大多数根本没有回调函数，有些有嵌套的 ajax 调用。您应该查看 Promises 或 Fetch API

标签： javascript php jquery mysql ajax

【解决方案1】：

在 JavaScript 中，我正在使用这种方法

var getUniqueId = function () {
    return Math.random().toString(36).substr(2, 10);
};

生成的 id 示例"t0917mk342", "z6teqwb2v7" 等..

【讨论】：

在我的情况下@Ankush Jain
在你的情况下你两者都有。

【解决方案2】：

在您的文件中使用一个会话计数器变量来像这样唯一您的 div id

if(!isset($_SESSION['divcounter'])){
   $_SESSION['divcounter'] = 1;
}

然后在你的 add ques 函数中使用这个会话变量，如下所示

$num = $cnt + $_SESSION['divcounter'];
$_SESSION['divcounter']++;

【讨论】：