Javascript 如何将.hasClass与$（此）一起使用？

我在我的页面上有一个标题，并用方框框住。那个盒子代表我的项目。当我点击其中一个按钮时，它会改变我的标题背景

<div class="row">
      <div class="job-one one-half column" onclick="headerProjBackground()">
        <p>First</p>
      </div>
      <div class="job-two one-half column" onclick="headerProjBackground()">
        <p>Second</p>
      </div>
</div>

---

但它不起作用。它无法理解我的（这个）。控制台中没有错误。因此，这是一个逻辑错误。

在

onclick

属性之外，

不再定义此

。你可以（至少）用两种方法解决这个问题

Alt 1:将此作为参数传递：

<div class="job-one one-half column" onclick="headerProjBackground(this)">

Alt 2:使用jQuery而不是HTML属性进行事件绑定：

<div class="job-one one-half column backgroundchanger">

还有一些进一步的想法：如果您希望它紧凑（清晰）的话，那么您对它的编码方式不是很好。所以让我们试着改进一下吧！如果使用Alt 2，则可以使用自定义的

数据-

属性来缩短代码：

<div class="one-half column" data-background="css/images/first-thing.png">

---

或者，如果使用Alt 1，您可以将所需的背景url作为参数传递，而不是

this

您可以删除div上的

onclick

属性并添加以下内容，

.css

方法有两个参数，它们之间带有逗号

//一旦dom准备好了
$（文档）.ready（函数（）{
//检查是否单击了column类的任何div
$（'.column'）。单击（函数（）{
//触发函数并传递（this），这是所单击div的对象
HeaderProjbBackground（本）；
});
});
//传递的元素将在函数中处理
功能标头ProjbBackground（元素）{
if（$（元素）.hasClass（'job-one'））{
console.log（'Hi！'）；
$（'header'）.css（'background'，'#000'）；
}
if（$（element）.hasClass（'job-two'））{
console.log（'Hello！'）；
$（'header'）.css（'background'，'#DDD'）；
}
}

Javascript中的Onlcick属性默认情况下在窗口下运行，这意味着函数中的“this”对象将始终是窗口，并且由于它没有任何与之关联的类，因此在if语句和if语句中都将始终给出false

请参阅以下更新的代码段-

$（'.jSelector'）。单击（函数（）{
if（$（this）.hasClass（'job-one'））{
log（'First Clicked！'）；
}
if（$（this）.hasClass（'job-two'））{
log（'secondclicked！'）；
}
});

首先

第二

问题是您没有使用jQuery作为
$（'.column'）将
此
传递到
headerProjBackground
handlerBind事件。on（'click'，function（）{
只需将
this
传递给每个
headerProjBackground
调用，然后它将读取我的“this”？可能的重复是，我希望尽可能紧凑，因为如果我有20个，我将执行20个不同的功能！不，这两个解决方案都适用于它们。例如，在备选方案2中，选择器
.backgroundchanger
将所有div与该类匹配，因此只要您添加该类（并删除
onlick
属性），一切都应该很好，而无需重复任何JS。@Godje编辑后添加了一些有用的额外提示。最后一个非常清晰。我甚至不敢相信StackOverflow会如此有用！
<div class="job-one one-half column backgroundchanger">

$(".backgroundchanger").click(function() {
    //Put the same code as for headerProjBackground() in your question.
    //Here you can use the this keyword.
});

<div class="one-half column" data-background="css/images/first-thing.png">

//If something that has the data-background attribute is clicked.
$('[data-background]').click(function() {
    //Get the value from the data-background attribute, and use that as background image.
    var background = $(this).attr('data-background');
    $('header').css('background-image': 'url(' + background + ')');
});