Question

我有一个函数可以根据点击按钮时的id来警告两个不同的东西。我遇到的问题是，即使id发生了变化，当你点击按钮时，它仍会给出在id改变之前的对话。

$('#loginBtn').on('click', function() {
  if ($('.button').has('#loginBtn')) {
    $('.button').attr('id', 'logoutBtn');
    alert('Logged In!');
  } else {
    alert('Already Logged In!');
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="loginBtn" class="button" href="#">Sign In</a>

Answer 1

this指的是点击处理程序中的按钮

$('#loginBtn').on('click', function () {
    if (this.id == 'loginBtn') {
        this.id = 'logoutBtn';
        alert('Logged In!');
    } else {
        alert('Already Logged In!');
    };
});

.has（）用于根据与传递的选择器

匹配的后代元素的呈现进行过滤

Answer 2

即使没有匹配，

if($('.button').has('#loginBtn'))也将一直为真。原因，它不是布尔，它是一个对象和对象是真实的。

检查需要检查长度

if($('.button').has('#loginBtn').length)

但是，为什么你不只是按ID查找按钮而不是查看所有按钮就没有任何意义。

if($('#loginBtn').length)

或者只看一下你点击的按钮

if(this.id==='loginBtn')

jQuery试图根据元素的id改变功能

2 个答案: