javascript - 是否可以从附加的 HTML 中将某些内容返回给函数？

Question

是否可以从附加的 HTML 中向函数返回一些内容？

在我的例子中，确定在该 HTML 中按下了哪个按钮。

---

场景

我正在为网络存储制作一个文件菜单系统。你有其他存储，bitmapr 网络存储，然后是本地磁盘。我希望能够使用 jQuery 创建一个文件选择系统。 (例如:我点击选择 bitmapr 网络存储，然后调用它的函数返回我点击的 bitmapr 网络存储。(或者一个合理的值意味着那个。)

问题

我不确定如何处理这种情况。我试过使用 onclick 返回，但没有用，而且 jquery append 不返回 onclick 上发生的事情。有没有办法解决上面发布的场景？

程序代码

模态显示功能

var advancedModal = function(html, title, msg, color) {
  $("body").append(`
      <div class="w3-modal-content w3-animate-opacity w3-display-middle modal">
        <header class="w3-container w3-${color}">
          <span onclick="$(this).parent().parent().remove()" class="w3-button w3-display-topright">&times;</span>
          <h2>${title}</h2>
          <small>${msg}</small>
        </header>
        ${html}
        <footer class="w3-container w3-${color}">
          <p>bitmapr</p>
        </footer>
      </div>
    </div>`);
    return (something determining what button was pressed)
};

advancedModal 调用

advancedModal(`

      <div class="w3-container w3-animate-opacity">
          <ul class="w3-ul">
            <li class="w3-light-grey w3-animate-opacity" onclick="$('ul', this).toggle();">
                <i class="fa fa-question">&nbsp;</i><i class="fa fa-chevron-right"></i> &nbsp;Web Storage
                <button class="w3-button w3-red" onclick="resetStorage()">Delete All</button>
                <ul class="w3-ul">
                  ${otherStorageHTML}
                </ul>
            </li>

            <li class="w3-blue blueGradient w3-animate-opacity" onclick="$('ul', this).toggle();">
                <i class="fa fa-images">&nbsp;</i><i class="fa fa-chevron-right"></i> &nbsp;<b>bitmapr</b> Web Storage
                <button class="w3-button w3-teal" onclick="return 'clicked me'">Select</button>

                <ul class="w3-ul">
                  ${bitmaprHTML}
                </ul>
            </li>
            <li class="w3-blue w3-deep-purple w3-animate-opacity" onclick="$('ul', this).toggle();">
                <i class="fa fa-archive">&nbsp;</i><i class="fa fa-chevron-right"></i> &nbsp;Local Disk Storage
                <button class="w3-button w3-teal" onclick="">Select</button>

                <ul class="w3-ul">
                  Not Available Now
                </ul>
            </li>
          </ul>
        </div>

      `, "Open", spaceLeft + "MB remaining in virtual storage", "blue"));

注意:所有 ${} 变量都已正确定义。

文字图

var value = advancedModal(...)

advancedModal(html, title, etc...) {
  prints out html, but on click of a button, return a value corresponding to the button
}

视觉图

额外的东西

在举报/关闭之前，请在评论中发表您的问题或需要澄清的内容。我努力在这里解释这一切，但我可​​能遗漏了一些东西。谢谢。

Answer 1

您可以传递回调而不是返回值。这可以是一个新参数。

var advancedModal = function(html, title, msg, color,callback) {};

现在您可以使用委托(delegate)方法在单击按钮时调用。

var advancedModal = function(html, title, msg, color,callback) {
    ... appending ...
    $('.w3-container').on("click","button",callback);
};

这将在任何被点击的按钮上调用回调函数。这是一个例子:

advancedModal(html, title, msg, color,function(){
    console.log(this); // <-- this is the button
});

为按钮标签赋予一个允许您识别它的属性是个好主意。

工作示例: JsFiddle