与javascript和php while循环一起使用

Posted 2021-04-29

我要更新屏幕快照中显示的房费。当我单击“编辑房间价格”时，它会隐藏现有按钮并显示包含现有房间价值的文本框。当我在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>

screen shot

我要更新屏幕快照中显示的房费。当我单击“编辑房间价格”时，它会隐藏现有按钮并显示包含现有房间价值的文本框。当我在php中使用while循环获取此数据时，它仅适用于第一个元素。请帮助我

答案

您可以尝试删除监听器，因为您只想显示按钮。其次，使用class代替元素的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; 
 }

希望有帮助