Question

嘿，我的页面上有这张照片：

<?php echo "<img src=\"image.php\" id=\"pic\" class=\"grid\">";?>

通过点击此元素，应该开始交互，所以我测试了：

$(function() {
    $( "#pic" ).click(function() {
        alert ( "Works" );
    });
});

有效，接下来我想实现互动（http://jqueryui.com/resizable/#snap-to-grid）

只有当您点击此图片并且恰好在这个地方点击时，才会启动此互动，因此：

$(function() {
    $( "#pic" ).click(function() {
        $( "#grid" ).resizable({
            grid: 20;
        });
    });
});

但它不起作用，有谁知道为什么？问候

Answer 1

您在#grid中使用了选择器ID，但您必须在此模式中选择类网格：.grid 改变这个：

$(function() {
    $( "#pic" ).click(function() {
        $( "#grid" ).resizable({
            grid: 20;
        });
    });
});

到此：

$(function() {
    $( "#pic" ).click(function() {
        $( ".grid" ).resizable({
            grid: 20
        });
    });
});

<强>更新

$(function() {
    $( ".grid" ).hide();
    $( "#pic" ).click(function(e) {
        $( ".grid" ).show();
        var offset = $(this).offset();
        $( ".grid" ).css('top', (e.clientX - offset.top) + 'px');
        $( ".grid" ).css('left', (e.clientY - offset.left) + 'px');
        $( ".grid" ).resizable({
            grid: 20
        });
    });
});

DEMO

Answer 2

因为您使用过：

"#grid"

而不是：

".grid"

？您正在尝试使用id，但在您的HTML代码中，您已声明class网格。

Answer 3

因为没有标识为grid的元素。 $('#grid')是id = grid元素的选择器，$('.grid')是class = grid元素的选择器。

通过onClick（jquery）进行消防交互

3 个答案: