Question

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

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

代码应该是这样的：嗯，所以使用这个是变量，现在这个是列表，然后我会成为$('ul').children ...？它遵循什么逻辑，我该如何解决它？

问题的缩小示例：

＆＃13;

$(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);
  })
});

＆＃13;

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

＆＃13;

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执行逻辑。

＆＃13;

// 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()
});

＆＃13;

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

＆＃13;

在实际函数之前声明$（this）变量

2 个答案: