Question

我正在尝试为所选的每个选项创建一个唯一的确认对话框。但是目前我已将其设置为只有在所选选项小于先前选择的选项时才会出现对话框。除了对话之外，所有人似乎都很好。

我注意到，当我更改为选项时，警报会在每个选项上获取数据模型属性，但有时它不会触发正确的对话框。（可能要不断浏览才能看到它）。

例如，如果我选择Mono选项 - 警报将显示（＆＃39; bus-outputs-reduce-width-to-mono），这是正确的，但对话框将显示＆＃34; reduce to Stereo＆＃ 34。

每次变化都不同，但我无法弄清楚为什么会这样做。

如果选项没有改变，直到你按下确认（虽然我知道我不能使用.change函数但不确定我们还有什么用途），这样会很好。

有什么想法吗？

HTML

<select class="bus-width btn-light-outline" data-modal="fader-layout-new">
    <option value="No Path" data-modal="bus-outputs-remove-bus">No Path</option>
    <option value="Mono" data-modal="bus-outputs-reduce-width-to-mono" selected="selected" >Mono</option>
    <option value="Surround" data-modal="bus-outputs-reduce-width-to-stereo">Stereo</option>
    <option>5.1 Surround</option>
  </select>

<div class="overlay">

    <a class="cancel">Cancel</a>
    <a class="confirm">Confirm</a>

<div class="hide" id="bus-outputs-remove-bus">Remove Bus?</div>
<div class="hide" id="bus-outputs-reduce-width-to-mono">Reduce to Mono?</div>
<div class="hide" id="bus-outputs-reduce-width-to-stereo">Reduce to Stereo?</div>

</div>

SCRIPT：

var lastIndex = null;

$('select.bus-width').on('change', function () {

    var thisIndex = $(this).find(":selected").index();
    if(thisIndex < lastIndex){
        var myModal = $(':selected').attr("data-modal");
        alert(myModal);
        $('#' + myModal).stop().fadeIn(300);
        $('.overlay').fadeIn(300);
    }

    lastIndex = thisIndex;

});


$('.confirm').click(function() {
    $('.overlay').hide();
});

CSS：

.overlay {
    position:fixed;
    background:rgba(0,0,0,0.5);
    top:0;
    bottom:0;
    right:0;
    left:0;
    text-align:center;
    display:none;
    z-index:99999;
}
.hide {
    display:none;
    position:absolute;
    width:200px;
    top:200px;
    left:50%;
    margin-left:-200px;
    background:red;
}
.cancel {
    background:white;
    position:absolute;
    top:270px;
    left:200px;
    padding:20px;
}
.confirm {
    background:yellow;
    position:absolute;
    top:270px;
    left:270px;
    padding:20px;
}

样本： http://jsfiddle.net/susannalarsen/47a21r25/

为所选的每个选项选择单独的唯一对话框

0 个答案: