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

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


<!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>
  • 写回答

1条回答 默认 最新

  • 恐怖如斯恐怖如斯啊 2024-12-07 17:02
    关注

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

    你的代码在点击确认按钮后确实会改变按钮的值，但如果你发现值没有立即更新，这可能是因为你正在尝试更改按钮的值，而浏览器可能还没有渲染这个改变。你可以尝试使用 .prop() 方法来更新按钮的值，并确保在尝试更新值之前模态对话框已经隐藏。此外，确保你的代码没有其他地方覆盖或重置按钮的值。

    以下是修改后的代码：

    $(document).ready(function(){
  $(".modal").css("display", "none"); //初始隐藏模态对话框

  $("#myButton").click(function(){ //点击按钮显示模态对话框
    $(".modal").css("display", "block");
  });

  $(".close").click(function(){ //点击关闭按钮隐藏模态对话框
    $("#confirmBtn").off('click').click(); // 这里先触发一次确认按钮的点击事件以隐藏模态框，然后再解绑防止意外重复触发
    $(".modal").css("display", "none");
  });

  $("#confirmBtn").click(function(){ //点击确认按钮更新按钮值和隐藏模态对话框
    $("#myButton").prop("value", "New Value"); //使用.prop()方法来更新按钮的值
    $(".modal").css("display", "none"); //确保在尝试更新值之前模态对话框已经隐藏
  });
});

    这个修改后的代码应该会在点击确认按钮后正确更新按钮的值。如果仍然存在问题，请检查是否有其他JavaScript代码或CSS样式影响按钮的显示。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • jQuery EasyUI 1.5.4 示例源码深度解析
    2025-05-30 03:54
    Emmamkq~~的博客 在前端开发领域，jQuery EasyUI为实现快速而高效的用户界面提供了诸多便利。作为一个基于jQuery的UI库，它简化了Web应用界面的创建，同时提供了丰富的组件和扩展，使得开发者无需编写大量样板代码即可实现功能丰富、...
  • JavaScript核心 DOM 和 BOM操作
    2022-07-23 20:53
    闪耀的小火龙的博客 3.2 事件三要素 事件源 （谁） 事件类型 （什么事件） 事件处理程序 （做啥） 案例：点击按钮弹出警示框 页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框。 案例分析 获取事件源（按钮） 注册事件...
  • 前端面试汇总-React
    2023-06-29 19:52
    码海行舟的博客 如果需要重新渲染那么就需要重新开辟空间引用数据。PureComponent一般会用在一些纯展示组件上。 使用pureComponent的好处：当组件更新时，如果组件的props或者state都没有改变，render函数就不会触发。省去虚拟DOM的...
  • 复习js部分（每日更新）
    2023-06-14 19:40
    onlyeverstudy的博客 } } 现在对象obj里边存的是每个字符出现的次数，现在要算出最大值： 遍历对象for ......in let maxNum = 0 let ch = '' for (let a in obj){ if(obj[a] > maxNum) { maxNum = obj[a] ch = a } } console.log(maxNum...
  • 【转载】我的编程之路——知识管理与知识体系
    2019-06-12 15:52
    guojin08的博客 本文的资料放到了Github Repo （本文介绍的这种笔记...三年前开始进入工作岗位进行实践，前前后后参与了公司里、学校里也有十来个项目，自己也有多次自主创业的经历。在不懂事的时候，笔者自诩“全栈架构师”，从...
  • JavaScript脚本集锦：创建酷炫网页效果代码大全
    2025-06-02 10:32
    被ldy取笑的博客 JavaScript 是一门轻量级的编程语言，被广泛应用于 Web 开发中，为网页添加交互功能。它最初只在浏览器中运行，现在已经成为一种全功能的编程语言，拥有服务器端执行环境如 Node.js，使其应用范围进一步拓展到服务器...
  • 前端4-JavaScript API知识点合集
    2025-09-08 20:57
    感受到风了吗的博客 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序 与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。...
  • 编程字典-web 前端学习线路图
    2018-10-10 16:56
    chujiu1884的博客 CSS 颜色十六进制值 | CSS3 浏览器支持参考手册 | | CSS align-content 属性 | CSS align-items 属性 | CSS align-self 属性 | CSS all 属性 | CSS3 animation（动画） 属性 | CSS3 animation-delay ...
  • java学习——ssm_crud项目学习笔记
    2019-06-16 21:12
    ys_design的博客 文章目录ssm_crud环境配置spring测试单元crudretrieve 查询create 创建update 更新delete 删除补充知识注解方面jquery ssm_crud 环境配置 新建maven的web项目 配置maven核心配置文件pom.xml <!-- spring ...
  • 我的编程之路——知识管理与知识体系
    2018-02-09 12:02
    乡土老农的博客 Coder-Knowledge-Graph当我要学习一门编程语言:C++/Java/PHP/Swift/Rust/Go。。。语法基础入门概述Quick Start数据结构流程控制与异常处理函数模块与组件类与对象IO语法应用...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 12月15日
  • 已采纳回答 12月7日
  • 创建了问题 12月7日