javascript - 在 JavaScript DOM 中是否可以将整个按钮功能克隆到另一个?
问题描述
我的意思是是否可以将现有按钮与新创建的按钮连接起来,该按钮将用作现有按钮?
参考网站:https ://www.ninetypercent.com/products/sleeveless-gather-maxi-dress-c5?color=red
打开以上链接后,请将以下代码粘贴到浏览器控制台:
let title = document.querySelector(".product-details__name").textContent;
let price;
let oldPrice = document.querySelector(".product-details__old-price");
if (oldPrice) {
price = oldPrice.nextSibling.textContent.trim();
} else {
price = document.querySelector(".js-product-price").textContent;
}
let div = document.createElement("div");
let path = document.querySelector("header");
div.innerHTML = `
<div
id="sticky-nav"
style="position: fixed;
top:110px;
display: none;
padding: 0 10px;
justify-content: space-between;
align-items: center;
background-color:#e4e4e4;
width: 100vw;"
class="sticky-wrapper"
>
<div
style="width:80%; display: flex; justify-content: space-between; align-items:center"
class="sticky-text-wrapper"
>
<p style="margin: 0;" class="sticky-text">${title}</p>
<p style="margin: 0;" class="sticky-price">${price}</p>
</div>
<span style="width: 18%; display: flex; justify-content: space-around;" class="button"></span>
</div>`;
path.appendChild(div);
const sourceElement = document.querySelector(".js-product-details-submit-wrapper button");
const destination = document.querySelector(".button");
const copy = sourceElement.cloneNode(true);
destination.appendChild(copy);
window.addEventListener("scroll", () => {
const scrollPos = window.scrollY;
if (scrollPos > 1500) {
document.getElementById("sticky-nav").style.display = "flex";
} else {
document.getElementById("sticky-nav").style.display = "none";
}
});
我想将粘性导航按钮连接到现有的“添加到包”按钮,两个按钮的功能将是相同的。与控制相同的消息将出现在 PDP(产品详细信息页面)上,并且购物篮图标数量将增加。我怎样才能做到这一点?
解决方案
在一个按钮的单击处理程序中,您可以触发另一个按钮,如下所示(名称当然是组成的):
stickyNavBtn.onclick = () => addToBagBtn.click();
推荐阅读
- css - 如何设置组件最大高度?
- ios - 如何调用graphql API
- ms-access - 女士访问 - 从一列中删除重复项
- c# - HLS 播放列表中列出的片段位于何处?
- python - 如何在 Flask 中分别处理多用户的请求?
- android - 无法将形状应用于按钮
- java - 通过在 Windows 10 中运行 Quick Installer jar 文件安装 Oracle WebLogic Server 12.2.1.0.0
- r - 检查和替换两个矩阵中的值
- php - 如何为 swagger-php OpenApi 添加接受应用程序/json 标头
- hive - 将数据从 Hive PARQUET 表迁移到 BigQuery,Hive 字符串数据类型正在 BQ 中转换 - BYTES 数据类型