Question

我写了这个脚本，但它没有按照我想要的方式工作：

$(document).ready(function(){
    if ($('#map_container').find('#point').length == 0 ) {
        $("#map_container").click(function (e) { 
            var relativeXPosition = (e.pageX - this.offsetLeft);
            var relativeYPosition = (e.pageY - this.offsetTop);
            //alert('left: '+relativeXPosition+', top: '+relativeYPosition);
            $("#map_container").append('<img id="point" src="<?=url::base();?>images/city.png" alt="" />');
            $("#point").css({ top: (relativeYPosition) + 'px', left: relativeXPosition + 'px', position: 'absolute' })
        }); 
    }
});

它应该只放一个带有id =“point”的img，但是当我点击map_container两次时我得到两个img，为什么这个如果不起作用？

Answer 1

你说：“如果长度为零，那么每次点击元素时，都要做一件事”

你的意思是：“每次点击元素时，如果长度为零，做一件事”

将测试放在事件处理程序中。

Answer 2

试试这个：

$(document).ready(function(){

    $("#map_container").click(function (e) { 
        if ($('#map_container').find('#point').length == 0 ) {
            var relativeXPosition = (e.pageX - this.offsetLeft);
            var relativeYPosition = (e.pageY - this.offsetTop);
            //alert('left: '+relativeXPosition+', top: '+relativeYPosition);
            $("#map_container").append('<img id="point" src="<?=url::base();?>images/city.png" alt="" />');
            $("#point").css({ top: (relativeYPosition) + 'px', left: relativeXPosition + 'px', position: 'absolute' })
        } 
    });
});

您必须在点击功能中设置if。

Answer 3

你只绑定click()如果还没有图像，但是 click()（可以多次调用）你不< / em>执行此检查。因此，

$(document).ready(function(){ $("#map_container").click(function (e) { if ($(this).find('#point').length == 0 ) { var relativeXPosition = (e.pageX - this.offsetLeft); var relativeYPosition = (e.pageY - this.offsetTop); //alert('left: '+relativeXPosition+', top: '+relativeYPosition); $("#map_container").append('<img id="point" src="<?=url::base();?>images/city.png" alt="" />'); $("#point").css({ top: (relativeYPosition) + 'px', left: relativeXPosition + 'px', position: 'absolute' }) } }); });

详细说明：在您的代码中，click()处理程序绑定一次（取决于条件 - 我怀疑它总是返回true）但可以调用几次总是产生相同的输出。但是，在上面，click()处理程序对每次调用执行检查，因此仅在条件为假时生成输出（即，还没有#point）。

编辑：unbind() / one()
@tsimbalar使用unbind()非常整洁solution。那个聪明的如果你的click() 不包含else部分（如果#point 那么 >存在）。通过one()：$(...).one('click', function() { ... });
可以实现同样的目标
$(document).ready(function(){ $("#map_container").one('click', function (e) { var relativeXPosition = (e.pageX - this.offsetLeft); var relativeYPosition = (e.pageY - this.offsetTop); //alert('left: '+relativeXPosition+', top: '+relativeYPosition); $("#map_container").append('<img id="point" src="<?=url::base();?>images/city.png" alt="" />'); $("#point").css({ top: (relativeYPosition) + 'px', left: relativeXPosition + 'px', position: 'absolute' }) }); });

Answer 4

我理解你想要的是click事件的代码只能执行一次。

这样的事情会更好，我想：

$(document).ready(function(){
        $("#map_container").click(function (e) { 
            var relativeXPosition = (e.pageX - this.offsetLeft);
            var relativeYPosition = (e.pageY - this.offsetTop);
            //alert('left: '+relativeXPosition+', top: '+relativeYPosition);
            $("#map_container").append('<img id="point" src="<?=url::base();?>images/city.png" alt="" />');
            $("#point").css({ top: (relativeYPosition) + 'px', left: relativeXPosition + 'px', position: 'absolute' })
            //we are done here, do not react to clicks anymore !
            $(this).unbind('click')
        });
});

请注意unbind，表示您不希望在发生点击时被调用。

如果在jquery中不起作用

4 个答案: