javascript 如何在语义 UI 模式中使用自定义回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25616832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use custom callback in semantic-ui modal
提问by Natwar Singh
I want to use more than 2 button in semantic-ui modal for feedback purpose as easy,normaland hard. And I also need to perform action according to button clicked.
我想在语义 ui 模式中使用 2 个以上的按钮作为反馈目的，如easy,normal和hard。而且我还需要根据单击的按钮执行操作。
I know how to use approve and deny button (I can use it for 2 buttons). But how to handle these 3 buttons with 3 different callback.
我知道如何使用批准和拒绝按钮（我可以将它用于 2 个按钮）。但是如何使用 3 个不同的回调处理这 3 个按钮。
Or any alternative solution for this.
或任何替代解决方案。
回答by Dimitar Ivanov
Well, the perfect solution would be if it were possible to know which button was pressed in any of the callbacks. Unfortunately I can't find a way to do that.
好吧，完美的解决方案是如果有可能知道在任何回调中按下了哪个按钮。不幸的是，我找不到办法做到这一点。
onApprove: function () {
console.log(this); // returns the modal
console.log(arguments); // returns an empty array
}
So, instead of above, add an event listeners to your buttons. This way you know which callback to execute.
因此，不要在上面添加一个事件侦听器到您的按钮上。这样你就知道要执行哪个回调。
<button class="show">Open</button>
<div class="ui small modal">
<i class="close icon"></i>
<div class="header">Test title</div>
<div class="content">Test content</div>
<div class="actions">
<div class="ui button approve green" data-value="easy">Easy</div>
<div class="ui button approve blue" data-value="normal">Normal</div>
<div class="ui button approve red" data-value="hard">Hard</div>
</div>
</div>
<div>Result: <span id="result"></span></div>
<script type="text/javascript">
$(document).on("click", ".show", function () {
$(".ui.modal").modal("setting", {
closable: false,
onApprove: function () {
return false;
}
}).modal("show");
}).on("click", ".ui.button", function () {
switch ($(this).data("value")) {
case 'easy':
$("#result").html("easy");
$(".ui.modal").modal("hide");
break;
case 'normal':
$("#result").html("normal");
$(".ui.modal").modal("hide");
break;
case 'hard':
$("#result").html("hard");
$(".ui.modal").modal("hide");
break;
}
});
</script>
Working demo: http://jsfiddle.net/osgg8kzL/1/
回答by pykiss
onApprove: function (e) {
console.log(e); // returns the button
}
So html:
所以 html：
<div class="ui modal">
<div class="content">
choose
</div>
<div class="actions">
<button class="ui button easy ok">easy</button>
<button class="ui button normal ok">normal</button>
<button class="ui button hard ok">hard</button>
</div>
</div>
and js:
和js：
$('.ui.modal').modal({
onApprove: function (e) {
if (e.hasClass('easy')) {
yourstuff()
}
if (e.hasClass('normal')) {
yourstuff()
}
if (e.hasClass('hard')) {
yourstuff()
}
},
}).modal('show')
