stevenjin 2024-12-07 17:08 采纳率: 96.8%
浏览 5
已结题

jquery点击按钮弹出模态对话框后,点击确认按钮后,对该按钮重新赋值,但界面值没有刷新

界面没有变化 ,实际上值已经改了,这样也不行。


 $("#myButton").prop("value", "New Value"); 

  
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Value Update Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<button id="myButton">Click Me!</button>
 
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
    <button id="confirmBtn">确认</button>
  </div>
</div>
 
<script>
// 模态对话框的显示和隐藏
$(document).ready(function(){
  $(".modal").css("display", "none");
  
  $("#myButton").click(function(){
    $(".modal").css("display", "block");
  });
  
  $(".close").click(function(){
    $(".modal").css("display", "none");
  });
  
  $("#confirmBtn").click(function(){
    $("#myButton").val("New Value");  
    $(".modal").css("display", "none");
  });
});
</script>
 
<style>
/* 模态对话框的样式 */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}
 
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
 
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
 
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
</body>
</html>
  • 写回答

3条回答 默认 最新

  • 关注

    以下回复参考:皆我百晓生券券喵儿等免费微信小程序作答:

    问题似乎在于你更新了按钮的值,但是页面没有刷新显示新的值。这是因为你在JavaScript中更改了按钮的value属性,但是页面上的DOM元素还没有来得及更新。当你在JavaScript中更改DOM属性时,需要手动触发页面的重新渲染以更新显示。你可以使用jQuery的.prop()方法来改变属性值并立即触发DOM更新。在你的代码中,你已经使用了.prop()方法来改变按钮的值,但是你可能需要确保在改变值之后触发页面的重新渲染。这可以通过使用.trigger('change')来完成。下面是修改后的代码:

    $("#confirmBtn").click(function(){
      $("#myButton").val("New Value").trigger('change');  // 添加触发事件来强制刷新页面上的显示
      $(".modal").css("display", "none");
    });
    

    这段代码将确保在更改按钮值后触发一个事件,使页面能够重新渲染并更新显示。现在,当你点击确认按钮后,按钮的值应该会被更新并显示在界面上。

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月7日
  • 创建了问题 12月7日