在实际函数之前声明 $(this) 变量答案

【问题标题】：Declaring $(this) variable before actual function在实际函数之前声明 $(this) 变量
【发布时间】：2017-10-23 19:05:51
【问题描述】：

我必须根据某些元素的 ID 进行一系列检查，但它们都略有不同。

所以我做了一堆函数，而不是总是重复$(this).children ...，我想要一个简短的变量。但是当我在实际函数之外声明它时，我得到undefined。

代码不应该像这样工作吗：嗯，所以有一个使用 this 的变量，而现在 this 是一个 list ，那么我会变成$('ul').children ... 吗？它遵循什么逻辑，我应该如何解决它？

问题的缩小示例：

$(document).ready(function() {
  var thisID = $(this).attr('id');

  function replaceContent(id) {
    $('#' + id).html('new content, and the ID is: ' + thisID);
  }

  $('button').on('click', function() {
    alert(thisID);
    // replaceContent(thisID);
    replaceContent(hello);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello">abc</div>

<div id="result"></div>

<button>button</button>

https://jsfiddle.net/2kduy9vp/84/

【问题讨论】：

一个不只是声明this，它存在于不同的上下文中，具体取决于它在代码中的使用位置。您的 document.ready 函数中的this 指的是浏览器窗口对象。事件处理程序中的this 通常指的是被点击/更改/提交的浏览器元素，这就是我认为您正在寻找的内容。
@James 但是为什么 this 不成为被点击的事件处理程序（即使我声明它时它是窗口），当它在函数中使用时?它不应该“再次检查” this 当前指的是什么吗？那是我不明白的。
不，它不会再次检查。 thisID 将始终具有窗口对象 ID 的值。如果您将thisID = this.id 放在按钮单击处理程序中，它将被更新为单击按钮的 id。
变量不“记住”它是如何初始化的。同样，如果您执行var a = 2; var b = a + 1;，则变量b 不会在您更改a 的值时发生变化。

标签： javascript jquery html variables global-variables

【解决方案1】：

这并不是“this”的工作原理。当您将“this”存储在“$(document).ready”下时，您的引用将是“文档”，而不是您稍后将拥有的元素。 "this" 不完全是一个变量，而更像是该范围内当前元素的关键字。

为了解决你的“问题”，如果你真的想改变，你可能想改成这样：

$(document).ready(function() {
  function getID(element) {
    return $(element).attr('id');
  }

  function replaceContent(id) {
    $('#' + id).html('new content, and the ID is: ' + id);
  }

  $('button').on('click', function() {
    var thisID = getID(this);
    replaceContent(thisID);
    replaceContent('hello');
  })
});

【讨论】：

【解决方案2】：

我认为这就是你想要的。当您在子列表的范围/上下文中时，您只能使用this。您也可以创建一个方法来传递不同的 id 以对给定的 id 执行逻辑。

// Example one
var hightLightItem = function(div) {
    $(div).css("color", "blue"); // Putting this in here will refer to window
}
hightLightItem("#One");

// Example Two
var childs = $("#A-bunch-of-items2").children();

childs.each(function() {
    $(this).css("color", "red"); // this in here refers to the child at each iteration of .each()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A-bunch-of-items">
  <div id="One">One</div>
  <div id="Two">Two</div>
  <div id="Three">Three</div>
  <div id="Four">Four</div>
  <div id="Five">Five</div>
  <div id="Six">Six</div>
</div>
<div id="A-bunch-of-items2">
  <div id="One">One</div>
  <div id="Two">Two</div>
  <div id="Three">Three</div>
  <div id="Four">Four</div>
  <div id="Five">Five</div>
  <div id="Six">Six</div>
</div>

【讨论】：