Question

对此非常新，并且我已经使用了onClick命令，这令我感到困惑。

意味着什么：用户单击购物车文本（在已设置样式的div元素内），并打开一个包含用户购物车内容的对话框。

以下是以下代码......

我觉得本周我已经做了很多事情，因为我可能会错过一些非常简单的事情而且只是愚蠢。

非常感谢任何帮助。

复制代码

<script type="text/javascript">
$(function() {
$( 'div.dialog' ).dialog( {modal:true,autoOpen:false} );
$('CartLink').on( 'click', function() {
    var index = $(this).index() + 1;
    $( '#dialog' +  index ).dialog( 'open' );
});
});
</script>

    <div class="dialog" id="dialog1">Shopping Cart Contents</div>

<div id="CartLink" class="fluid ShoppingCart"><img src="images/Site/Shopping_cart.gif"         
alt="" width="25" height="23"/>Shopping Cart</div>

Answer 1

您在id selector

之前缺少#

$(function() {
    $( 'div.dialog' ).dialog( {modal:true,autoOpen:false} );
    $('#CartLink').on( 'click', function() {
    //.^.....add # here.......
        var index = $(this).index();
        $( '#dialog' +  index ).dialog( 'open' );
    });
});

Answer 2

好像你错过了#来定位id

$('#CartLink').on( 'click', function() {
//-^ here -----
    var index = $(this).index() + 1;
    $( '#dialog' +  index ).dialog( 'open' );
});

您需要更改：

var index = $(this).index() + 1;

为：

var index = $(this).index();

因为目前index的{{1}} #CartLink不是1，而是0。所以你不需要再增加1。

Answer 3

不要依赖.index()将对话框链接到按钮。您问的示例是因为当前，div#CartLink是其父节点中的第二个子节点，但是您的html中的任何修改（在div中添加标题，必须将按钮移动到另一个屏幕的一部分等等......将打破这种假设。

一种简单的方法是将目标对话框ID显式放在自定义属性中：

<div id="dialog1">...</div>
<div id="CartLink" data-dialog="dialog1" class="...">...</div>


$('#CartLink').on('click', function(){
    var id = $(this).attr('data-dialog');
    $('#'+id).dialog('open');
});

坚持使用onClick打开对话框

3 个答案: