将“ 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通常调用作为事件处理程序传递给您的事件所关联的DOM对象的函数， this函数具有this设置。

在这种情况下，它将调用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的值。 我还在警报的两个变量之间添加了一个空格。

如果您无法在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是第一个模板，并使用nextElementSibling的ID填充templateId2 。 这种确切的方法仅适用于两个.template ，如果还有更多，您将需要一些其他/不同的逻辑，可能需要检索所有.template ID，然后循环遍历它们以将它们添加到警报消息中。 希望这可以帮助。