使用 javascript 和 php while 循環

Question

我想更新屏幕截圖上顯示的房價。 當我點擊編輯房價時，它會隱藏現有按鈕並顯示包含現有房間價值的文本框。 當我在 php 中使用 while 循環獲取此數據時，它僅適用於第一個元素。 請幫我

        used javascript as bellow



<script>
                function hide_editbtn()
                {
                var rmrate = document.getElementsByClassName("roomrate"); 

                for(var i = 0; i < rmrate.length; i++){

                rmrate[i].style.display = "none"; 
                rmrate[i].disabled = true; 
                }

                var updbtn = document.getElementsByClassName("updateratebtn"); 
                for(var i = 0; i < updbtn.length; i++){

                updbtn[i].style.display = "none"; 
                rmrate[i].disabled = true;
                }
                }


                function show_editbtn()
                {
                var rmratelink = document.getElementsByClassName("roomratelink"); 

                for(var i = 0; i < rmratelink.length; i++){

                    (function(index){
                    rmratelink[i].onclick = function(){

                        document.getElementById("roomrate").style.display="block";
                        document.getElementById("roomrate").disabled = false;



                    }    
                    })(
                }
                }

                </script>

Used html Content as bellow 

<div class="card-stacked order-sm-1 newelmnt">
            <div class="card-body pt-sm-0 pb-0 px-0 pr-sm-6 pr-md-8">
            <p> &nbsp; </p>
            <h3 class="card-title font-weight-normal text-truncate elconnt">
            Ac Room
            </h3>
            <div class="d-flex align-items-baseline price mb-1">
            <span class="d-block text-primary font-weight-500 display-5 mr-1">Rs.<label id="hotelroomrate">1500</label> &nbsp; &nbsp; <span class="btn-group-toggle roomratelink" data-toggle="buttons" onclick="show_editbtn()" id="roomratelink" style="margin-top:10px;">
            <label class="btn btn-xs btn-outline-primary mb-2">
            <input type="checkbox"> Edit Room Rate
            </label>
            </span> 
            </span>
            <label class="sr-only" for="user-name">&nbsp;</label>
            <input type="text" class="form-control roomrate" id="roomrate" aria-describedby="user-name" placeholder="Modify Room Rate" style="width:180px;padding-right:10px;"/> &nbsp;  &nbsp;
            <span class="btn-group-toggle updateratebtn" data-toggle="buttons" id="updateratebtn" >
            <label class="btn btn-outline-primary mb-2" style="background:#512da8;color:#fff;margin-top:5px;">
            <input type="checkbox"> Submit
            </label>
            </span>
            </div>
            </div>
            </div>

截屏

我想更新屏幕截圖上顯示的房價。 當我點擊編輯房價時，它會隱藏現有按鈕並顯示包含現有房間價值的文本框。 當我在 php 中使用 while 循環獲取此數據時，它僅適用於第一個元素。 請幫我

Answer 1

您可以嘗試刪除偵聽器，因為您只想顯示按鈕。 其次，對元素使用類而不是 ID。 ID 是唯一的。 因此，當您循環它時，只會處理第一次出現。 將#roomrate ID 設為類 .roomrate。

 for(var i = 0; i < rmratelink.length; i++){
     let btn = rmratelink[i].getElementsByClassName('roomrate')[0];
     btn.style.display="block";
     btn.disabled = false; 
 }

希望能幫助到你