如何使我的点击捕手工作?

时间:2015-01-21 16:06:00

标签: javascript unobtrusive-javascript

我试图创建一个简单的点击捕手,如果你点击.image-class,javascript将从另一个名为.btn的元素中获取href,然后发送给你&#39 ;目的地。虽然我在第7行和第7行都遇到错误10说undefined不是一个函数。我如何使这项工作?

<script>
var ClickCatcher=
{
    init:function(){
        var link = jQuery('.btn')[1].href;
        var imgCatch = jQuery('.image-class');
        imgCatch.addEventListener("click", ClickCatcher.clickListener, false);
    },
    clickListener:function(){
        window.location = link;
    }
};
ClickCatcher.init();
</script>

2 个答案:

答案 0 :(得分:3)

您可以使用jquery通过简单的单击事件

来执行此操作
jQuery('.image-class').on('click', function (){
    window.location = jQuery('.btn').eq(1).attr('href');
});

但是如果你仍然想以你所拥有的方式写作:

var ClickCatcher = {
    init: function () {
        jQuery('.image-class').on('click', function (){
            window.location = jQuery('.btn').eq(1).attr('href');
        });
    }
};

ClickCatcher.init();

确保在dom加载后触发init方法。

更新:它的一个问题是你已经在代码中编写了目标等而不是传递它,所以它很难重用,你最好这样做:

var ClickCatcher = {
    init: function ($button, loc) {
        $button.on('click', function (){
            window.location = loc;
        });
    }
};

ClickCatcher.init(jQuery('.image-class'), jQuery('.btn').eq(1).attr('href'));

这样,内部工作与dom分离(因为你将dom依赖项传递给函数。

答案 1 :(得分:1)

@atmd展示了一种很好的方法。如果你只是想知道你的错误是什么。在你的jQuery stament中获取btn href是错误的

jQuery('.btn')[1].href

你需要调用attr函数然后获取href attr。并使用.eq(1)将设置减少到第一个btn

jQuery('.btn').eq(1).attr('href);