将 "This" 加入 Javascript 中的命名空间

Question

我确定这应该是一个简单的问题，但我仍在学习所以这里是：

我有一些代码可以在点击时运行一个函数，将被点击的元素的 ID 分配给一个变量，但我不知道如何在不创建全局变量的情况下将 "this.id" 值传递给命名空间（我觉得不好）。

<script>
    fsa = (function() {

        function GetTemplateLoc() {
            templateId = document.activeElement.id;
            alert(templateId + templateId2);
        }


        return {
            GetTemplateLoc: GetTemplateLoc,
        }

    })();

    //call the functions
    $(document).on('click', '.template', function () {
        fsa.GetTemplateLoc();
    });
</script>

和HTML随机图片：

<img id="template-1" class="template" src="http://fc02.deviantart.net/fs70/f/2010/028/c/b/cb21eda885b4cc6ee3f549a417770596.png"/>
<img id="template-2" class="template" src="http://fc02.deviantart.net/fs70/f/2010/028/c/b/cb21eda885b4cc6ee3f549a417770596.png"/>

Answer 1

试试这个：您可以直接使用 this.id 传递被点击元素的 ID，其中 this 指的是被点击元素的实例。

<script>
    fsa = (function() {

        function GetTemplateLoc(templateId ) {
            //templateId = document.activeElement.id;
            alert(templateId + templateId2);
        }


        return {
            GetTemplateLoc: GetTemplateLoc,
        }

    })();

    //call the functions
    $(document).on('click', '.template', function () {
        fsa.GetTemplateLoc(this.id);
    });
</script>

Answer 2

以下方法可行：

var fsa = (function() {
    function GetTemplateLoc() {
        var templateId = this.id;
        alert(templateId);
    }
    return {
        GetTemplateLoc: GetTemplateLoc,
    }
})();

//call the functions
$(document).on('click', '.template', fsa.GetTemplateLoc);

jQuery 通常调用您作为事件处理程序传递的函数，其中 this 设置为与事件关联的 DOM 对象。

在这种情况下，它将调用 GetTemplateLoc() 并将 this 设置为任一 .template 元素，因此您可以直接在函数中使用 this 而不需要传递任何参数。

重要提示：始终使用 var 声明变量。 JavaScript 没有变量的自动函数局部范围，即每个没有 var 声明的变量都是全局的，无论你在哪里声明它。换句话说，忘记 var 算作错误。

Answer 3

如果您能够在 GetTemplateLoc 函数中使用 jQuery，您可以这样做：

var fsa = (function() {

    function GetTemplateLoc($trigger) {
        var templateId = $trigger.attr('id'),
            templateId2 = $($trigger.siblings('.template')[0]).attr('id');
        alert(templateId + ' ' + templateId2);
    }


    return {
        GetTemplateLoc: GetTemplateLoc,
    }
})();

$(document).on('click', '.template', function () {
    fsa.GetTemplateLoc($(this));
});

你可以设置GetTemplateLoc期望一个jQuery对象作为参数（$trigger开头的美元符号可以用来区分它是一个jQuery 对象而不是任何其他数据类型，这不是必需的，但有时可以帮助澄清事情）。

templateId 将存储点击图像的 ID 值，而 templateId2 将存储其他图像的 ID 值。我还在警报中的两个变量之间添加了一个space。

如果您不能在 GetTemplateLoc 内使用 jQuery，您可以这样做：

var fsa = (function() {

    function GetTemplateLoc(trigger) {
        var templateId = trigger.id;

        var templateId2 = trigger.nextElementSibling == null ? trigger.previousElementSibling.id : trigger.nextElementSibling.id;

        alert(templateId + ' ' + templateId2);
    }

    return {
        GetTemplateLoc: GetTemplateLoc,
    }
})();

这次，触发事件的 .template 被传递给 GetTemplateLoc，但这次它不是 jQuery 对象。 templateId 分配给触发器的 ID，然后 templateId2 在 ternary 中分配。首先，检查 trigger 的 nextElementSibling 是否为 null。如果是，我们知道 trigger 是两个 .template 元素中的第二个。因此我们可以将 templateId2 设置为 trigger 的前一个兄弟的 ID。如果trigger的nextElementSibling不是null，那么我们知道trigger是第一个模板，我们用[=22=的ID填充templateId2 ].这个确切的方法只适用于两个 .template，如果有更多你需要一些 additional/different 逻辑，可能要检索所有 .template ID，然后遍历它们以添加它们到警报消息。希望这会有所帮助。

将 "This" 加入 Javascript 中的命名空间

Getting "This" into a namespace in Javascript

javascript

jquery

namespaces

this