javascript - 如何将一个功能用于 2 个组件的变体?
问题描述
Javascript新手在这里。我必须使用普通的旧 Javascript 来编写它。我有 2 个内联编辑组件,唯一的区别是一个使用图标而不是按钮。我遇到的问题是我写了 2 个编辑功能,分配给两个组件,但是如果我单击第二个组件,它会影响第一个。有没有办法专注于一个组件而不影响另一个组件,而无需编写两对函数?
这是我制作的 Codepen 的链接: https ://codepen.io/sfilippone/pen/rNmEKXd
最上面的例子工作正常,但第二个(带按钮)会影响上面的例子。:/
任何帮助表示赞赏。谢谢。
这是代码:
<h3>with icons</h3>
<div class="c-inline-edit--icons">
<div id="c-inline-edit-wrapper" class="border-yes">
<input id="c-inline-edit-input" class="c-readonly-input" type="text" value="Lorem ipsum" onclick="yesEdit()" readonly/>
<a id="btn-edit" onclick="yesEdit()"><span class="icon icon-16-edit-default-mono"></span></a>
</div>
<div class="c-btn-set-icon">
<a id="btn-cancel" class="c-btn c-btn-secondary" onclick="noEdit()"><span class="icon-16-close-mono"></span></a>
<a id="btn-save" class="c-btn c-btn-primary" onclick="noEdit()"><span class="icon-checkmark-mono"></a>
</div>
</div>
<h3>with buttons</h3>
<div class="c-inline-edit--buttons">
<div id="c-inline-edit-wrapper" class="border-yes">
<input id="c-inline-edit-input" class="c-readonly-input" type="text" value="Lorem ipsum" onclick="yesEdit()" readonly/>
<a id="btn-edit" onclick="yesEdit()"><span class="icon icon-16-edit-default-mono"></span></a>
</div>
<div class="c-btn-set">
<a id="btn-cancel" class="c-btn c-btn--mini c-btn--info" onclick="noEdit()">Cancel</a>
<a id="btn-save" class="c-btn c-btn--mini c-btn--outline" onclick="noEdit()">Save</a>
</div>
</div>
剧本:
<script>
document.addEventListener('keydown', function(event){
if(event.key === "Escape") {
noEdit();
} else if(event.key === "Enter") {
noEdit();
}
});
function yesEdit() {
document.getElementById("btn-edit").style.display = "none";
document.getElementById("btn-save").style.display = "inline-block";
document.getElementById("btn-cancel").style.display = "inline-block";
var editWrapper = document.getElementById("c-inline-edit-wrapper");
editWrapper.classList.replace("border-yes", "border-no");
var element = document.getElementById("c-inline-edit-input");
element.removeAttribute("readonly");
element.classList.replace("c-readonly-input", "c-input");
}
function noEdit() {
document.getElementById("btn-edit").style.display = "inline-block";
document.getElementById("btn-save").style.display = "none";
document.getElementById("btn-cancel").style.display = "none";
var editWrapper = document.getElementById("c-inline-edit-wrapper");
editWrapper.classList.replace("border-no", "border-yes");
var element = document.getElementById("c-inline-edit-input");
element.setAttribute("readonly", "");
element.classList.replace("c-input", "c-readonly-input");
}
</script>
解决方案
Html id 属性在文档中必须是唯一的。
当按下按钮时,首先触发上部 id 并且上部组件切换。
解决此问题的最短方法是为您的元素提供不同的 id,并将 id 传递给您的“yesEdit”和“noEdit”函数。
这是一个例子:https ://codepen.io/emreavcilar/pen/xxdoJVm?editors=1010
<h1>Inline Edit</h1>
<br /><br />
<h3>with icons</h3>
<div class="c-inline-edit--icons">
<div id="c-inline-edit-wrapper-1" class="border-yes">
<input id="c-inline-edit-input-1" class="c-readonly-input" type="text" value="Lorem ipsum" onclick="yesEdit(1)" readonly />
<a id="btn-edit-1" onclick="yesEdit(1)"><span class="icon icon-16-edit-default-mono"></span></a>
</div>
<div class="c-btn-set-icon">
<a id="btn-cancel-1" class="c-btn c-btn-secondary" onclick="noEdit(1)"><span class="icon-16-close-mono"></span></a>
<a id="btn-save-1" class="c-btn c-btn-primary" onclick="noEdit(1)"><span class="icon-checkmark-mono"></a>
</div>
</div>
<h3>with buttons</h3>
<div class="c-inline-edit--buttons">
<div id="c-inline-edit-wrapper-2" class="border-yes">
<input id="c-inline-edit-input-2" class="c-readonly-input" type="text" value="Lorem ipsum" onclick="yesEdit(2)" readonly />
<a id="btn-edit-2" onclick="yesEdit(2)"><span class="icon icon-16-edit-default-mono"></span></a>
</div>
<div class="c-btn-set">
<a id="btn-cancel-2" class="c-btn c-btn--mini c-btn--info" onclick="noEdit(2)">Cancel</a>
<a id="btn-save-2" class="c-btn c-btn--mini c-btn--outline" onclick="noEdit(2)">Save</a>
</div>
</div>
推荐阅读
- php - guzzle 未定义函数 getStatusCode()
- ruamel.yaml - 使用 ruamel.yaml 打印出单个元素单引号的列表?
- dynamic - 将 iCheck 插件与动态单选按钮和淘汰赛 js 集成
- ms-access - 访问:按来自不同来源的日期排序
- python - python中的快速排序算法实现
- reactjs - ReactJs 无限循环
- xamarin.forms - 在发布模式 xamarin 上具有退出代码 1 的 Java.exe
- python - Python:Django TypeError:object()不带参数
- python - 以与 Jupyter Notebook 相同的样式将 pandas 数据框呈现为 HTML
- python - 405 客户端错误:url 不允许使用方法:https://rinkeby.infura.io PYTHON