<div class="popup-content"> <div class="popup-row"> <div class="popup-item">5</div> <div class="popup-item">10</div> <div class="popup-item">20</div> </div> <div class="popup-row"> <div class="popup-item">50</div> <div class="popup-item">100</div> <div class="popup-item">200</div> </div> <div> <div><van-button round type="info">确认提现</van-button></div> </div> </div>点击确认提现弹出选中的div中对应的数字

您可以通过以下方式之一实现这一点：

1. 给每个 div 添加一个唯一的 ID，然后在确认提现按钮的点击事件中，使用 JavaScript 获取选中的 div 的 ID 并提取其中的数字。

2. 给每个 div 添加一个共同的类名，然后使用 JavaScript 获取所有具有该类名的元素，循环遍历这些元素，找到被选中的元素，然后提取其中的数字。

相关问题

<div class="popup-content"> <div class="popup-row"> <div class="popup-item">5</div> <div class="popup-item">10</div> <div class="popup-item">20</div> </div> <div class="popup-row"> <div class="popup-item">50</div> <div class="popup-item">100</div> <div class="popup-item">200</div> </div> <div> <div><van-button round type="info">确认提现</van-button></div> </div> </div>点击确认提现弹出选中的div中对应的数字并示范一下

好的，以下是示例代码：

HTML 代码：

<div class="popup-content">
  <div class="popup-row">
    <div class="popup-item" id="popup-item-1">5</div>
    <div class="popup-item" id="popup-item-2">10</div>
    <div class="popup-item" id="popup-item-3">20</div>
  </div>
  <div class="popup-row">
    <div class="popup-item" id="popup-item-4">50</div>
    <div class="popup-item" id="popup-item-5">100</div>
    <div class="popup-item" id="popup-item-6">200</div>
  </div>
  <div>
    <div><van-button round type="info" id="confirm-button">确认提现</van-button></div>
  </div>
</div>

JavaScript 代码：

// 获取确认提现按钮元素
var confirmButton = document.getElementById("confirm-button");

// 添加点击事件处理程序
confirmButton.onclick = function() {
  // 获取所有选项元素
  var popupItems = document.getElementsByClassName("popup-item");
  // 遍历选项元素
  for (var i = 0; i < popupItems.length; i++) {
    // 判断当前选项元素是否被选中
    if (popupItems[i].classList.contains("selected")) {
      // 提取选项元素中的数字并弹出提示框
      var selectedNumber = popupItems[i].innerHTML;
      alert("您选中了：" + selectedNumber);
      break;
    }
  }
}

// 获取所有选项元素
var popupItems = document.getElementsByClassName("popup-item");
// 遍历选项元素
for (var i = 0; i < popupItems.length; i++) {
  // 添加点击事件处理程序
  popupItems[i].onclick = function() {
    // 取消所有选中状态
    for (var j = 0; j < popupItems.length; j++) {
      popupItems[j].classList.remove("selected");
    }
    // 添加选中状态
    this.classList.add("selected");
  }
}

示例代码中，我们给每个选项元素添加了一个唯一的 ID，然后在确认提现按钮的点击事件中，遍历所有选项元素，找到被选中的元素，提取其中的数字，并弹出提示框。

同时，我们也给每个选项元素添加了一个点击事件处理程序，当用户点击一个选项时，我们会取消所有选中状态，然后将当前选项设为选中状态。这样，用户就可以通过点击选项来选择要提现的金额。

<div> <div style="display: flex"> <div>5</div> <div>10</div> <div>20</div> <div>30</div> </div> <div style="display: flex"> <div>50</div> <div>100</div> <div>200</div> <div>500</div> </div> </div>美化这些div用于提现页面

好的，下面是美化这些`<div>`标签的样式：

/* 父容器样式 */
.popup-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
}

/* 子容器样式 */
.popup-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

/* 子元素样式 */
.popup-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 20px;
  color: #333;
  background-color: #fff; /* 背景色 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 鼠标悬停样式 */
.popup-item:hover {
  transform: scale(1.1); /* 放大动画 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* 放大后的阴影 */
  cursor: pointer;
}

/* 选中样式 */
.popup-item.active {
  color: #fff;
  background-color: #f00;
}

您可以将这些样式添加到您的样式表中，或将其添加到`<style>`标签中。然后，您需要在弹窗中添加以下代码：

<van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
  <div class="popup-content">
    <div class="popup-row">
      <div class="popup-item">5</div>
      <div class="popup-item">10</div>
      <div class="popup-item">20</div>
      <div class="popup-item">30</div>
    </div>
    <div class="popup-row">
      <div class="popup-item">50</div>
      <div class="popup-item">100</div>
      <div class="popup-item">200</div>
      <div class="popup-item">500</div>
    </div>
  </div>
</van-popup>

这样就可以应用这些样式，并且实现了鼠标悬停和选中效果。如果您需要根据具体需求进行修改，可以对样式进行调整。