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

Question

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

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

代码不是应该像这样工作吗：嗯，所以有一个变量使用它，现在这是一个列表，那么我会变得$('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/

Answer 1

这不是"这个"的工作方式。当你在"$（document）.ready"下存储"this"时，你的引用是"文档"，而不是你以后的元素。"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');
  })
});

Answer 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>