Question

以下是我想要做的代码示例。

这不起作用：

function fnSelectableDiv(){
  $('.selectableDiv').removeClass('selected-div');
  $(this).addClass('selected-div');
}

$('.selectableDiv').click(function () {
  fnSelectableDiv()
});

如果我按照下面提到的那样做，事情会有效，但我想弄清楚如何使上面的代码工作：

$('.selectableDiv').click(function () {
  $('.selectableDiv').removeClass('selected-div');
  $(this).addClass('selected-div');
});

CSS

.selectableDiv{width: 100px; height: 20px; border: 2px solid #333}
.selected-div{background-color:red)

HTML

<div class="selectableDiv"></div>
<div class="selectableDiv"></div>

Answer 1

有几种方法可以解决它

使用.call()在您的函数中设置this：

function fnSelectableDiv(){
  $('.selectableDiv').removeClass('selected-div');
  $(this).addClass('selected-div');
}

$('.selectableDiv').click(function () {
  fnSelectableDiv.call(this); // set context for fnSelectableDiv.
});

将this的值作为参数传递给此函数：

function fnSelectableDiv(el){
  $('.selectableDiv').removeClass('selected-div');
  $(el).addClass('selected-div');
}

$('.selectableDiv').click(function () {
  fnSelectableDiv(this); // pass this as argument 
});

Answer 2

将参数传递给n＃39; fnSelectableDiv（obj）＆＃39;

function fnSelectableDiv(obj){
  $('.selectableDiv').removeClass('selected-div');
  $(obj).addClass('selected-div');
}

$('.selectableDiv').click(function () {
  fnSelectableDiv(this); // pass this as argument 
});

Answer 3

这样做：

function fnSelectableDiv(elem){//pass a parameter for element
  $('.selectableDiv').removeClass('selected-div');
  elem.addClass('selected-div');
}

$('.selectableDiv').click(function () {
  fnSelectableDiv($(this))//use element as $(this)
});

如何调用函数内的函数也传递$（this）对象

3 个答案: