函數中的參數（jquery / dialog）

Question

我正在嘗試對多個鏈接使用相同的功能。 這是我的代碼。

<a class="col-md-4 nieuws-item btn" href="javascript: void(0)" onclick="showDialog(dialog1); return false;" type="black">
    <p>sometext</p>
</a>

<a class="col-md-4 nieuws-item btn" href="javascript: void(0)" onclick="showDialog(dialog2); return false;" type="black">
    <p>sometext</p>
</a>

--

function showDialog(dialogname)
{
    $("#" + dialogname).dialog({
        modal: true,
        resizable: false,
        closeOnEscape: true
    });
}

--

<div id="dialog1" title="SIM Beurs 2015" style="display: none;">
    <p>test</p>
</div>


<div id="dialog2" title="SIM Beurs 2015" style="display: none;">
    <p>test</p>
</div>

我在朝正確的方向看嗎？ 如果是這樣，我的錯誤在哪里？

Answer 1

您缺少一些引號：

onclick="showDialog('dialog1'); return false;"
                    ^here   ^and here

與dialog2相同。

Answer 2

如果您避免使用內聯onclick=處理程序，而僅使用jQuery處理程序，則不會發生（並且更加明顯）此問題。 這也將代碼與處理程序一起保存。

這具有允許每個項目使用多個處理程序的優點，並且不會避免jQuery提供的其他一些很酷的事件功能。

例如

<a class="col-md-4 nieuws-item btn" data-dialog="dialog1" href="javascript: void(0)" type="black">
    <p>sometext</p>
</a>

<a class="col-md-4 nieuws-item btn" data-dialog="dialog2" href="javascript: void(0)" type="black">
    <p>sometext</p>
</a>

並使用這樣的jQuery處理程序：

$('.nieuws-item.btn').click(function(){
    var dialogname = $(this).data('dialog');
    $("#" + dialogname).dialog({
        modal: true,
        resizable: false,
        closeOnEscape: true
    });
    return false;
});

或者，如果元素是動態添加的，請使用委托的處理程序：

$(document).on('click', '.nieuws-item.btn', function(){
    var dialogname = $(this).data('dialog');
    $("#" + dialogname).dialog({
        modal: true,
        resizable: false,
        closeOnEscape: true
    });
    return false;
});