qq_42669510 2023-09-06 21:06 采纳率: 73.3%
浏览 6

JS移动端问题：关于如何保持按钮禁用状态和刷新后保持禁用不变


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="./css/common.css" />
    <link
      rel="stylesheet"
      href="./css/task.css" />
    <script src="./js/flexible.js"></script>
  </head>
  <body>
    <!-- 1. header1头部公共区域 -->
    <div class="header1">
      <a
        class="father"
        data-id="0">
        待提货
        <p class="line"></p>
      </a>
      <a
        class="father"
        data-id="1">
        在途
        <p class="line"></p>
      </a>
      <a
        class="father"
        data-id="2">
        已完成
        <p class="line"></p>
      </a>
    </div>
    <!-- 3. 主体区域 -->
    <div class="container">
     
    </div>
    <!-- 2. footer底部公共区域 -->
    <div class="footer">
      <a href="javascript:;"
        ><img
          src="./assests/first.png"
          alt="" />
        <p>任务</p></a
      >
      <a href="javascript:;"
        ><img
          src="./assests/second.png"
          alt="" />
        <p>消息</p></a
      >
      <a href="javascript:;"
        ><img
          src="./assests/last.png"
          alt="" />
        <p>我的</p></a
      >
    </div>
    <script>
      let indexArr = []

      const info = [
        {
          num: 'XAHH1234567',
          from: '北京市昌平区回龙观街道西三旗桥东金燕龙写字楼 8877 号',
          to: '河南省郑州市路北区北清路 99 号',
          time: '2022.05.04 13:00:00',
        },
        {
          num: 'YBHJ1234567',
          from: '上海市浦东新区世纪大道 123 号金贸大厦 1234 室',
          to: '广东省深圳市南山区科技中一路 99 号',
          time: '2022.05.05 14:00:00',
        },
        {
          num: 'ZXCS1234567',
          from: '杭州市西湖区文一西路 123 号中关村科技大厦 8877 室',
          to: '江苏省南京市江北新区江北大道 99 号',
          time: '2022.05.06 15:00:00',
        },
        {
          num: 'ABCD1234567',
          from: '成都市青羊区蜀都大道 123 号环球中心 1234 室',
          to: '重庆市江北区观音桥街道建新东路 99 号',
          time: '2022.05.07 16:00:00',
        },
        {
          num: 'EFGH1234567',
          from: '天津市滨海新区泰达街道第四大街 123 号滨海金融大厦 1234 室',
          to: '河北省石家庄市鹿泉区北站街 99 号',
          time: '2022.05.08 17:00:00',
        },
      ]
      const header1 = document.querySelector('.header1')
      const lines = document.querySelectorAll('.line')
      header1.addEventListener('touchstart', function (e) {
        if ((e.target.tagName = 'DIV')) {
          let num = e.target.dataset.id
          lines.forEach(function (item) {
            item.style.width = '0px'
            item.parentNode.style.color = '#818181'
          })
          lines[num].style.width = '23px'
          e.target.style.color = '#2a2929'
        }
      })
      const container = document.querySelector('.container')
      setContainer()
      function setContainer() {
        const arr = info.map(function (item) {
          return `
        <div class="task">
      <a class="title" href="./detail.html">
        <p>任务编号: ${item.num}</p>
        <span>已延迟</span>
      </a>
      <a class="main" href="./detail.html">
        <div class="address">
          <p class="from">起</p>
          <div class="sline"></div>
          <p class="to">止</p>
        </div>
        <div class="right">
          <p class="from">${item.from}</p>
          <p class="to">${item.to}</p>
        </div>
      </a>
      <div class="bottom">
        <div class="bleft">
          <p>提货时间</p>
          <p class="time">${item.time}</p>
        </div>
        <div class="bright">提货</div>
      </div>
    </div>       
        `
        })
        
        container.innerHTML = arr.join('')
        const brights = document.querySelectorAll('.bright')
        brights.forEach(function (item, index) {
          item.addEventListener('touchstart', function () {
            this.style.backgroundColor = '#FADCD9'
          })
        })
        const titles = document.querySelectorAll('.title')
        const mains = document.querySelectorAll('.main')
        titles.forEach(function(item,index){
          item.addEventListener('touchstart',function(e){e.preventDefault()
            localStorage.setItem('detail',JSON.stringify(info[index]))
          })
        })
      }
     
    </script>
  </body>
</html>



/* 去除常见标签默认的 margin 和 padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  background-color: #F4F4F4;
}
/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}
/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}
/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}
/*  清除浮动 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: block;
}
.clearfix::after {
  clear: both;
}
.container {
  width: 9.49333333rem;
  margin: 0 auto;
}
.header1 {
  padding: 0 0.82666667rem;
  width: 100%;
  height: 1.33333333rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
}
.header1 .father {
  font-size: 0.42666667rem;
  margin-right: 0.96rem;
  color: #818181;
  position: relative;
  white-space: nowrap;
}
.header1 .father:first-child {
  color: #2a2929;
}
.header1 .father:first-child .line {
  width: 0.61333333rem;
}
.header1 .father .line {
  width: 0;
  height: 0.10666667rem;
  background-color: #ef4f3f;
  position: absolute;
  bottom: -0.16rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0.05333333rem;
  transition: all 0.3s;
}
body {
  padding: 1.33333333rem 0.4rem 0;
}
body .container {
  width: 100%;
  height: 100%;
  margin-bottom: 1.73333333rem;
}
body .container .task {
  display: block;
  width: 9.2rem;
  height: 6.10666667rem;
  margin: 0.4rem 0;
  padding: 0.4rem 0.34666667rem 0 0.50666667rem;
  border-radius: 0.26666667rem;
  background-color: #fff;
}
body .container .task .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body .container .task .title p {
  font-size: 0.42666667rem;
  color: #2a2929;
}
body .container .task .title span {
  display: none;
  font-size: 0.32rem;
  border: 0.02666667rem solid #ef4f3f;
  width: 1.38666667rem;
  height: 0.58666667rem;
  color: #ef4f3f;
  border-radius: 0.29333333rem;
  text-align: center;
  line-height: 0.53333333rem;
}
body .container .task .main {
  display: flex;
  margin: 0.58666667rem 0;
}
body .container .task .main .address {
  display: flex;
  flex-direction: column;
  height: 1.97333333rem;
  width: 0.58666667rem;
  justify-content: space-between;
}
body .container .task .main .address .sline {
  flex: 1;
  width: 0.02666667rem;
  border: 0.02666667rem dashed #eee;
  margin: 0 auto;
}
body .container .task .main .address p {
  color: #fff;
  text-align: center;
  line-height: 0.58666667rem;
  font-size: 0.32rem;
  border-radius: 50%;
  width: 0.58666667rem;
  height: 0.58666667rem;
}
body .container .task .main .address p:nth-child(1) {
  background-color: #2a2929;
}
body .container .task .main .address p:last-child {
  background-color: #ef4f3f;
}
body .container .task .main .right {
  margin-left: 0.29333333rem;
  flex: 1;
}
body .container .task .main .right p {
  font-size: 0.37333333rem;
  color: #818181;
}
body .container .task .main .right p:nth-child(1) {
  margin-bottom: 0.29333333rem;
}
body .container .task .bottom {
  padding-top: 0.37333333rem;
  border-top: 0.02666667rem solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body .container .task .bottom .bleft p {
  font-size: 0.37333333rem;
}
body .container .task .bottom .bleft p:first-child {
  color: #818181;
}
body .container .task .bottom .bleft p:last-child {
  color: #2a2929;
}
body .container .task .bottom .bright {
  width: 2.13333333rem;
  height: 0.85333333rem;
  border-radius: 0.42666667rem;
  background-color: #ef4f3f;
  font-size: 0.42666667rem;
  color: #fff;
  text-align: center;
  line-height: 0.85333333rem;
}
/* 
p{
  &.acitve
} 
双选加类选择器
*/
/* 
p{
& .active
}
子代选择器 .active
*/

具体js代码和css基础样式下面有，要实现的效果就是点击提货按钮后即使再次刷新页面，提货按钮样式也是保持上次点击后的样子，即下面这样：
1.点击前

img


2.点击后

img

我原来想的是通过本地存储点击过的不同的提货按钮编号来找到这个按钮，然后再它被点击之后重新渲染页面，再通过这个编号index来单独设置它的样式已经放在渲染函数里面了，在二次渲染的后面，结果发现只有二次渲染执行了，更改的样式并没有被执行，请教下怎么解决这两个问题：
1.实现提货按钮按下后再次刷新也能保持禁用状态不变
2.怎么样可以让用户只能点击一次提货按钮且刷新后保持不能按下按钮触发？

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2023-09-06 22:30
    关注

    引用 皆我百晓生 小程序回复内容作答：
    线路10：要实现按钮点击后保持禁用状态并在刷新后保持不变，可以使用本地存储来实现首先，在点击按钮时，将按钮的禁用状态存储在本存储中。可以使用按钮的唯一标识作为键，将禁用状态作为值进行存储。例如javascriptconst brights = document.querySelectorAll('.brightbrights.forEach(function(item, index) item.addEventListener('click', function() this.style.backgroundColor = '#FADCD9 localStorage.setItem('buttonDisabled', JSON.stringify(true ``其中 `buttonDisabled` 是用来存储禁用状态的键，`true` 代表按钮已禁用然后，在页面加载时，从本地存储中获取按钮的禁用状态，并根据该状态设置按钮的样式。例如javascriptwindow.addEventListener('load', function() const buttonDisabled = JSON.parse(localStorage.getItem('buttonDisabled if (buttonDisabled) const brights = document.querySelectorAll('.bright brights.forEach(function(item) item.style.backgroundColor = '#FADCD9 ``此代码将在页面加载时获取 buttonDisabled 存储的禁用状态，如果为 true，则将按钮的样式设置为禁用样式通过以上代码，即可实现点击按钮后保持禁用状态，并在刷新后保持不变不过需要注意的是，这种方式只是在本地存储中保存了按钮禁用的状态，并不是实际的禁用按钮，如果用户清除了浏览器的本地存储数据，或者在其他设备上访问同一页面，按钮的禁用状态将不会生效。如果需要确保用户只能点击一次按钮且刷新后保持不能按下按钮触发，建议在后端进行处理，例如通过用户的身份验证来确定按钮的状态。

    线路8：
    To achieve the desired effect of keeping the disabled state of the delivery button even after refreshing the page, you can use local storage to store the state of the button. Here's an example of how you can modify your code to achieve this:

    First, add an event listener to the delivery button to handle the click event:

    const deliveryButton = document.querySelector('.task .bottom .bright');
deliveryButton.addEventListener('click', handleDeliveryButtonClick);

    In the handleDeliveryButtonClick function, you can update the local storage to store the state of the button:

    function handleDeliveryButtonClick() {
  // Update local storage to store the state of the button
  localStorage.setItem('deliveryButtonClicked', 'true');
}

    Next, in your rendering function, you can check the local storage to determine if the button was previously clicked:

    function render() {
  // Check if the button was previously clicked
  const deliveryButtonClicked = localStorage.getItem('deliveryButtonClicked') === 'true';

  // Add or remove a CSS class based on the button state
  if (deliveryButtonClicked) {
    deliveryButton.classList.add('active');
  } else {
    deliveryButton.classList.remove('active');
  }

  // Rest of your rendering code...
}

    Finally, in your CSS, you can define the styles for the active state of the button:

    body .container .task .bottom .bright.active {
  /* Styles for the active state of the button */
  /* e.g. background-color: red; */
}

    With this approach, the button will remain in the active state even after refreshing the page if it was previously clicked.

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 9月6日

悬赏问题

  • ¥15 esp32驱动GC9A01循环播放视频
  • ¥15 惠普360g9的最新bios
  • ¥15 配置hadoop时start-all.sh老是启动失败
  • ¥30 这个功能用什么软件发合适？
  • ¥60 微信小程序，取消订单，偶尔订单没有改变状态
  • ¥15 用pytorch实现PPO算法
  • ¥15 关于调制信号的星座图？
  • ¥30 前端传参时，后端接收不到参数
  • ¥15 这是有什么问题吗，我检查许可证了但是显示有呢
  • ¥15 机器学习预测遇到的目标函数问题