如何将一个功能用于 2 个组件的变体？

Question

这里是 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>

Answer 1

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>