Javascript 如何在同时传递$（this）对象的函数中调用函数

下面是我试图做的代码示例

这不起作用：

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>

---

有几种方法可以解决这个问题

使用

.call（）

在函数中设置

此

：

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

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

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

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

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

---

有几种方法可以解决这个问题

使用

.call（）

在函数中设置

此

：

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

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

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

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

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

---

将参数传递给“fnSelectableDiv（obj）”

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

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

---

将参数传递给“fnSelectableDiv（obj）”

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

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

这样做：

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

这样做：

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

---

使用

.call（$（this））

代替。。。因为这个.addClass（）不起作用，但是$（这个）.addClass（）起作用…@BhojendraNepal-为什么？传递

$（this）

而不是传递

this

没有任何好处。事实上，你的方法为调用方做了更多的工作，而函数中的代码却不那么常见。那么这个.addClass（）行得通吗？@BhojendraNepal-我不知道你在问什么。此答案不使用

This.addClass（）

任何地方。它使用

$（this）.addClass（）

或

$（el）.addClass（）

-这两种方法都可以在它们的上下文中使用。请改用

.call（$（this））

。。。因为这个.addClass（）不起作用，但是$（这个）.addClass（）起作用…@BhojendraNepal-为什么？传递

$（this）

而不是传递

this

没有任何好处。事实上，你的方法为调用方做了更多的工作，而函数中的代码却不那么常见。那么这个.addClass（）行得通吗？@BhojendraNepal-我不知道你在问什么。此答案不使用

This.addClass（）

任何地方。它使用

$（this）.addClass（）

或

$（el）.addClass（）

——这两种方法都可以在各自的上下文中使用。