Question

是否可以通过附加的HTML向函数返回某些内容？

就我而言，它决定了该HTML中按下了什么按钮。

场景

我正在制作用于Web存储的文件菜单系统。您有其他存储， bitmapr Web存储，然后还有本地磁盘。我希望能够使用jQuery创建文件选择系统。（例如：点击 bitmapr 网络存储上的select，然后调用该函数，该函数返回的结果就是单击 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) {};

现在，您可以使用委派的方法在单击按钮时进行调用。

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
});

最好为button标签赋予一个属性，使您可以识别它。

工作示例： JsFiddle

是否可以通过附加的HTML向函数返回某些内容？

是否可以通过附加的HTML向函数返回某些内容？

1 个答案: