Question

您能否请一看这个演示，让我知道为什么我没有收到#add-point按钮的文字？

＆＃13;

$("#add-point").on("click", function(){
  activatePointTool();
});

function activatePointTool() {
  var tool = $(this).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-point" class="btn btn-default btn-tool">Point</button>

＆＃13;

Answer 1

你需要将目标元素传递给函数，否则this会引用窗口对象：

$("#add-point").on("click", function(){
  activatePointTool(this);
});

function activatePointTool(el) {
  var tool = $(el).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
}

Answer 2

你没有任何＆＃34;这个＆＃34;在你的功能。您需要将其传递给您的函数或在点击功能中执行您的代码。在JS中进行编码时，这是一个非常重要的特性。

参考：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

＆＃13;

$("#add-point").on("click", function(){
  activatePointTool(this);
});

function activatePointTool(el) {
  var tool = $(el).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-point" class="btn btn-default btn-tool">Point</button>

＆＃13;

Answer 3

如果该函数唯一能做的就是处理动作 - 那么就忘记命名函数，只需在点击处理程序中包含所需的动作 - 其中'this'指的是点击的按钮，你不要需要将元素传递给另一个函数。

$("#add-point").on("click", function(){
   var tool = $(this).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-point" class="btn btn-default btn-tool">Point</button>

Answer 4

为什么我没有收到#add-point按钮的文本？

activatePointTool();仅表示单独的函数调用问题是目标元素（$("#add-point")）与事件处理程序（activatePointTool）没有绑定。
使用以下方法：

$("#add-point").on("click", activatePointTool);

function activatePointTool() {
  var tool = $(this).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-point" class="btn btn-default btn-tool">Point</button>

Answer 5

你有这个背景的问题是“窗口”。所以你需要做的是改变你调用方法的方式

$("#add-point").on("click", function(){
  activatePointTool.call(this);
});

function activatePointTool() {
  var tool = $(this).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-point" class="btn btn-default btn-tool">Point</button>

或者只是在没有闭包的情况下调用方法

$("#add-point").on("click", activatePointTool);

function activatePointTool() {
  var tool = $(this).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-point" class="btn btn-default btn-tool">Point</button>

通过调用方法无法获取按钮文本

5 个答案: