Ajax Javascript 在不刷新页面的情况下不会改变样式
Posted
技术标签:
【中文标题】Ajax Javascript 在不刷新页面的情况下不会改变样式【英文标题】：Ajax Javascript doesn't change the style without refreshing the page 【发布时间】：2021-12-25 01:43:12 【问题描述】：我必须创建一个网页，允许收件人预订或删除可用餐点（如果之前已预订），如果餐点已预订，则其样式必须更改。
但我一直面临这个问题，除非我刷新页面，否则（餐点名称）的样式不会改变。另外，当我单击保留时，数据库会更新并显示删除按钮，但 它被禁用，除非我刷新页面，否则我无法再单击它。
这是收件人主页的 Ajax javascript 部分：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" > </script>
<script>
$(document).ready(function()
//when remove button is clicked
$(".rmvJQ").click(function()
var classIdValue = this.value;
var toResvBtn = "#" + classIdValue +"toResvBtn";
var ToRmv = "#" + classIdValue +"ToRmv";
// var styleM = "#" + classIdValue +"toStyle";
$.get("rmov.php", classID : classIdValue,
function(response)
var opeartion = "success";
if(response == opeartion)
alert("The remove operation was failed");
else
// alert(classIdValue);
$("#RemovedSt").css("background-color");
$(toResvBtn).html("<button class ='rsvJQ' value ="+classIdValue+" >Reserve</button>");
$(ToRmv).html("");
);
);
//when reserve button is clicked
$(".rsvJQ").click(function()
var classIdValue = this.value;
var toResevededString = "#" +classIdValue + "toResevededString";
var tormovBtn = "#" + classIdValue + "tormovBtn";
var ReservedSt = "#" + classIdValue + "ReservedSt";
$.get("rsv.php", classID : classIdValue,
function(response)
var opeartion = "success";
if(response == opeartion)
alert("The reseve operation was failed");
else
alert("The reseve operation was successful!");
$(ReservedSt).css("background-color": "yellow", "font-size": "200%");
$(toResevededString).html("Reserved");
$(tormovBtn).html("<button class ='rmvJQ' value = '"+classIdValue+"' >Remove</button>");
);
);
);
</script>
这是同一页面的 php/html 部分
<?php
$error= mysqli_connect_errno();
if($error!=null)
echo "<p>unable to connect with db</p>";
exit($output);
else
$sql="SELECT * FROM restaurant";
$res=mysqli_query($con,$sql);
while($row=mysqli_fetch_assoc($res))
$restaurantID=$row['id'];
$sql="SELECT * FROM meal WHERE restaurant_id=".$restaurantID;
$meals=mysqli_query($con,$sql);
$check = mysqli_num_rows($meals);
if($check>0)
//list of meals for each restaurant
echo '<table id= "mealsList">';
echo '<thead>';
echo '<tr>';
echo "<caption>".$row['name']."</caption>" ;
echo "<tr ><th > Meals </th>"
. "<th colspan='2' > Status </th>"
."<br><br></tr>";
echo'</thead>';
//each meal
echo'<tbody>';
$resv=array(); //reserved meals
$remv=array(); //removed meals
while($row=mysqli_fetch_assoc($meals))
$sql4="SELECT * FROM reservation WHERE meal_id=".$row['id']." AND recipient_id=".$_SESSION['recipient_id'];
$res4=mysqli_query($con,$sql4);
$row4=mysqli_fetch_assoc($res4);
if($row4)
$resv[]=$row;
else
$remv[]= $row;
$i=0;
while($i<count($resv) )
echo '<tr >';
echo '<td id="'.$resv[$i]['id'].'ReservedSt" ><a style="background-color:#00ff00" href="MealInfo.php?mealID='.$resv[$i]['id'].'">'.$resv[$i]['name'].''.'</a> </td>';
echo '<td id="'.$resv[$i]['id'].'toResvBtn">Reserved</td>';
echo '<td id="'.$resv[$i]['id'].'ToRmv"><button class = "rmvJQ" value = "'.$resv[$i]['id'].'" >Remove</button></td>';
echo '</tr>';
$i++;
$i=0;
while($i<count($remv))
$checkZero = mysqli_query($con,"SELECT qty FROM meal WHERE id =".$remv[$i]['id']);
$checkZ=mysqli_fetch_assoc($checkZero);
if($checkZ['qty']>0)
echo '<tr id="RemovedSt" style="background-color:white" >'
. '<td ><a href="MealInfo.php?mealID='.$remv[$i]['id'].'">'.$remv[$i]['name'].'</a></td>' //<a href="enroll.php?classID='.$row['id'].'">Enroll</a>
. '<td id= "'.$remv[$i]['id'].'toResevededString"> <button class = "rsvJQ" value = "'.$remv[$i]['id'].'" >Reseve</button> </td>'
. '<td id = "'.$remv[$i]['id'].'tormovBtn"></td>'
. '</tr>';
else
echo '<tr>';
echo '<th ><a style="color:black;" href="MealInfo.php?mealID='.$remv[$i]['id'].'">'.$remv[$i]['name'].'</a> </th>';
echo '<td colspan="2" > meal is not available </td >';
echo '</tr>';
$i++;
//end of while loop
echo '</tbody>';
echo '</table>';
//end of if($check>0)
//end of big while
//end of big if-else
?>
an image of Recipient Home page with each restaurant and their available meals
请问有没有人遇到过这个问题或者知道如何解决呢？
【问题讨论】：
欢迎来到 Stack Overflow。有点不清楚为什么要为元素分配 CSS 样式而不是分配/删除特定的类名称。这使您更轻松地更改样式，并且通常一起更快。我们还需要查看生成的 HTML 而不是 PHP 才能提供适当的帮助。请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example 您说的是同一页面的 html/php？，因为您使用的是 AJAX，所以最好将 php 代码放在单独的文件中，甚至在您需要控制执行流程的单个文件中。跨度> 【参考方案1】：考虑以下内容。
配置 PHP 以创建以下 HTML 结构。
<table id="mealsList">
<thead>
<tr>
<caption>Vendor Name 1</caption>
<tr>
<th>Meals</th>
<th>Status</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr id="item-1001">
<td class="mealName">
<a class="highlight-green" href="MealInfo.php?mealID=1001">Meal Item 1</a>
</td>
<td class="mealStatus">Reserved</td>
<td class="mealOptions">
<button class="btn btn-remove">Remove</button>
</td>
</tr>
<tr id="item-1002">
<td class="mealName">
<a class="highlight-green" href="MealInfo.php?mealID=1002">Meal Item 2</a>
</td>
<td class="mealStatus">Reserved</td>
<td class="mealOptions">
<button class="btn btn-remove">Remove</button>
</td>
</tr>
<tr id="item-1003">
<td class="mealName">
<a class="highlight-green" href="MealInfo.php?mealID=1003">Meal Item 3</a>
</td>
<td class="mealStatus">Reserved</td>
<td class="mealOptions">
<button class="btn btn-remove">Remove</button>
</td>
</tr>
</tbody>
</table>
您可以在此处看到，在 HTML 结构中，我们将项目 ID 分配给行而不是行的每个部分。当我们稍后需要分配事件回调时，这使得它更加相关。有一个参考点。
然后应用以下 CSS
#mealsList
width: 340px;
.highlight-green
background-color: #00ff00;
.highlight-yellow
background-color: yellow;
.big
font-size: 200%;
这使您可以更轻松地在元素上添加或删除类，而不是更改特定的样式。这也使得将来管理更改变得更容易，您只需更新 CSS，然后不必调整您的 PHP 或 JS 代码。
JavaScript
$(function()
function removeItem(id)
$.get("rmov.php",
classID: id,
html: "success"
,
function(response)
if (response == "success")
console.log("Remove Successful");
$("#item-" + id + " .mealName a").removeClass("highlight-green");
$("#item-" + id + " .mealStatus").html("");
$("#item-" + id + " .mealOptions .btn").html("Reserve").toggleClass("btn-remove btn-reserve");
);
function reserveItem(id)
$.get("rsv.php",
classID: id,
html: "success"
,
function(response)
if (response == "success")
console.log("Reserve Successful");
$("#item-" + id + " .mealName a").addClass("highlight-yellow big");
$("#item-" + id + " .mealStatus").html("Reserved");
$("#item-" + id + " .mealOptions .btn").html("Remove").toggleClass("btn-remove btn-reserve");
);
$("#mealsList").on("click", ".btn-remove", function(event)
removeItem($(this).closest("tr").attr("id").split("-")[1]);
);
$("#mealsList").on("click", ".btn-reserve", function(event)
reserveItem($(this).closest("tr").attr("id").split("-")[1]);
);
);
工作示例：https://jsfiddle.net/Twisty/wLzakshp/9/
首先，我们要使用 jQuery .on() 来分配此用例中的事件回调。这是因为元素可能会被添加或更改，而这种类型的分配很适合。
委托事件处理程序的优点是它们可以处理来自后代元素的事件，这些事件会在以后添加到文档中。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件处理程序来避免频繁附加和删除事件处理程序的需要。
查看更多：https://api.jquery.com/on/
我使用函数让重复特定动作变得更容易。这些函数接受 ID（来自 Row）并将该详细信息发送到适当的脚本。如果成功，则进行具体更改。
【讨论】：
以上是关于Ajax Javascript 在不刷新页面的情况下不会改变样式的主要内容，如果未能解决你的问题，请参考以下文章