在下面的代码中,确认框显示在渲染addClass之前(即Safari 6.0.5)。是否可以确保在显示confirm()框之前呈现addClass()?
<style type="text/css">
.preview { background-color: #eee;width:100;height:100;color:red; }
.preview_s { border:3px solid blue;}
</style>
<script type="text/javascript">
function test(i)
{
$("#testdiv"+i).addClass('preview_s');
if (confirm('border not blue and checkmark not visible on some browsers until after choice is made'))
{
// Do confirmed thing here
} else {
// Abort
}
}
</script>
<form id="testform">
<div class="preview" id="testdiv1">test1</div>
<input type="checkbox" onclick="test(1);">
<div class="preview" id="testdiv2">test2</div>
<input type="checkbox" onclick="test(2);">
</form>
答案 0 :(得分:1)
不幸的是我没有配备Safari的Mac,但这样的工作会不会这样?
<script type="text/javascript">
function test(i)
{
$("#testdiv"+i).addClass('preview_s');
// wait 20 milliseconds before launching confirmation box
setTimeout(function(){
if (confirm('border not blue and checkmark not visible on some browsers until after choice is made')) {
// Do confirmed thing here
} else {
// Abort
}
}, 20);
}
</script>
在获得添加课程的说明后,几乎听起来DOM无法快速启动。
您可以随时将setTimeout
小幅增加,以查看addClass
需要多长时间才能完成
答案 1 :(得分:0)
编辑提供开箱即用的方法。
function runConfirm($div){
if($div.hasClass('preview_s')){
if (confirm('border not blue and checkmark not visible on some browsers until after choice is made')) {
// Do confirmed thing here
} else {
// Abort
}
} else {
runConfirm($div);
}
}
function test(i) {
var $div = $("#testdiv"+i);
$div.addClass('preview_s');
runConfirm($div);
}
这应该给你你想要的东西,因为被调用的函数会递归调用自己,直到满足.hasClass()
。
由于您提供了jsFiddle,updated it with this answer。
答案 2 :(得分:0)
我通过以下方式实现了它,但我没有使用它。因为在确认框打开之前是否附加了class属性是不明确的,我不喜欢等待80 ms。
const wrapper = button.closest('.js-item-row')
let needsSubmit = false
button.addEventListener('click', function(e){
if(!needsSubmit) {
e.preventDefault()
const message = button.getAttribute('data-confirm-message')
wrapper.classList.add('dynamicScaffold-destorying')
setTimeout(function(){
if(!confirm(message)){
wrapper.classList.remove("dynamicScaffold-destorying");
} else {
needsSubmit = true
button.click()
}
}, 80)
}
})