如何让我的点击捕捉器工作？

Question

我正在尝试创建一个简单的点击捕捉器，如果您点击 .image-class，javascript 将从另一个具有 class 名称 [=12= 的元素获取 href ] 并送你到它的目的地。虽然我在第 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>

Answer 1

您可以通过 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 依赖项传递给函数。

Answer 2

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

是一个错误

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

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

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

如何让我的点击捕捉器工作？

How do I make my click catcher work?

javascript

unobtrusive-javascript