javascript - Semantic-Ui:如何将参数从弹出元素传递到弹出内容？

Question

我正在尝试通过弹出窗口访问触发弹出窗口的元素内容(示例中的“Click me”按钮)，因此我使用非全局变量(示例中的“source_element”)作为解决方法。

HTML 代码:

<button id="show-popup-btn1" class="ui green button">
  Show popup 1
</button>

<button id="show-popup-btn2" class="ui red button">
  Show popup 2
</button>

<div class="ui popup">
  <button id="click-me-button" class="ui blue button">
    Click me
  </button>
</div>

Jquery 代码:

var source_element,
    popup = {
      popup: $('.ui.popup'),
      on: 'click',
      onShow: function(element) {
        source_element = element;
      }
    };

$('#show-popup-btn1').popup(popup);
$('#show-popup-btn2').popup(popup);

$('#click-me-button').on('click', function() {
  alert('The source element is: ' + source_element.innerText);
  $('button').popup('hide');
});

这是 Codepen 中的代码

有没有更好的方法来做到这一点？也许是官方方式？

Note: Please, feel free to adjust the code.

Answer 1

我找不到更好的方法来做到这一点，但对代码进行了一些改动，消除了非全局变量

var popup = {
  popup: $('.ui.popup'),
  on: 'click',
  onShow: function(element) {
    $('#click-me-button').off("click")
    $('#click-me-button').on('click', function() {
        alert('The source element is: ' +element.innerText);
        $('button').popup('hide');
    });
  }
};
$('#show-popup-btn1').popup(popup);
$('#show-popup-btn2').popup(popup);