Question

我有一个按钮，我在点击时会更改其值和名称，并在警报中显示相同的值。它在我使用jQuery时工作正常，但在我使用带有JavaScript函数值的调用函数时没有在前视图中改变，但在警报值中改变它的完全奇怪。

以下是演示

的JavaScript

＆＃13;

function change() {
  if ($(this).attr('name') == 'first') {
    $(this).attr('name', 'second');
    $(this).attr('value', 'second');
    alert('new name ' + $(this).attr('name'));
  } else {
    $(this).attr('name', 'first');
    $(this).attr('value', 'first');
    alert('new name ' + $(this).attr('name'));
  }
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" id="button" value="first" name="first" onclick="change()">

＆＃13;

的jQuery

＆＃13;

$('#button').click(function() {
  if ($(this).attr('name') == 'first') {
    $(this).attr('name', 'second');
    $(this).attr('value', 'second');
    alert('new name ' + $(this).attr('name'));
  } else {
    $(this).attr('name', 'first');
    $(this).attr('value', 'first');
    alert('new name ' + $(this).attr('name'));
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" id="button" value="first" name="first">

＆＃13;

我知道我可以使用jQuery，因为我已经包含了库，但我非常想知道这两者之间有什么区别。

Answer 1

您需要将this传递给更改函数，以便您可以访问该函数内的被点击对象，.click()任何元素的事件将自动检测$(this）但是您需要的功能通过它

在this功能按钮中传递change()：

<input type="submit" id="button" value="first" name="first"  onclick="change(this)">

因此更改功能将具有：

function change(obj) {
  if ($(obj).attr('name') == 'first') {
    $(obj).attr('name', 'second');
    $(obj).attr('value', 'second');
    alert('new name ' + $(obj).attr('name'));
  } else {
    $(obj).attr('name', 'first');
    $(obj).attr('value', 'first');
    alert('new name ' + $(obj).attr('name'));
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" id="button" value="first" name="first"  onclick="change(this)">

Answer 2

将'this'传递给函数并在函数内使用它代替'this'解决了你的问题。

因为在Jquery事件未处理的函数中使用'this'，返回函数的所有者，该函数是jQuery中的按钮对象，它返回一个jQuery对象

function change(btn){
	if($(btn).attr('name') == 'first'){
  	$(btn).attr('name','second');
    $(btn).attr('value','second');
    alert('new name '+$(btn).attr('name'));
  } else {
  	$(btn).attr('name','first');
  	$(btn).attr('value','first');
    alert('new name '+$(btn).attr('name'));
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" id="button" value="first" name="first"  onclick="change(this)">

javascript和jquery的不同行为

2 个答案: