Question

我的页面上有一个标题，并带有方框。那个方框代表我的项目。当我点击其中一个时，我想改变标题背景。

<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>

我的功能：

function headerProjBackground(){
 if($(this).hasClass('job-one')){
  console.log('Hi!');
  $('header').css('background-image': 'url(css/images/first-thing.png)');
 }
 if($(this).hasClass('job-one')){
   console.log('Hello!');
  $('header').css('background-image': 'url(css/images/second-thing.png)');
 }
}

但它不起作用。它无法理解我的（这个）。控制台中没有错误。所以这是合乎逻辑的错误。

Answer 1

默认情况下，Javascript中的Onlcick属性在Window下运行，这意味着＆＃34;这个＆＃34;函数中的对象将始终是窗口，因为它没有与之关联的任何类，因此在if语句中它总是会给出false。

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

＆＃13;

$('.jSelector').click(function(){

 if($(this).hasClass('job-one')){
  console.log('First Clicked!');
 }
 if($(this).hasClass('job-two')){
   console.log('Second Clicked!');
 }
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="job-one one-half column jSelector">
        <p>First</p>
      </div>
      <div class="job-two one-half column jSelector">
        <p>Second</p>
      </div>
</div>

＆＃13;

希望这会有所帮助!!

Answer 2

在onclick属性之外，不再定义this。您可以（至少）以两种方式解决此问题。

替代1：将this作为参数传递：

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

function headerProjBackground(clicked) {
    //Replace this with clicked in the code of the function.

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

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

还有一些进一步的想法：如果你想要它紧凑（和清晰），你编码的方式并不是很好。所以我们试着改进它吧！如果您使用Alt 2，则可以使用自定义data-属性来缩短代码：

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

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

Answer 3

您可以删除div上的onclick属性并添加以下内容，.css方法也有两个逗号参数。

＆＃13;

<script type="text/javascript">
    // once the dom is ready
    $(document).ready(function() {
        // check if any of the divs with column class is clicked
        $('.column').click(function() {
                // trigger the function and pass the (this) which is the object for the div clicked
                headerProjBackground(this);
        });
    });

// element passed will be worked on in the function
function headerProjBackground(element){
    if($(element).hasClass('job-one')){
        console.log('Hi!');
        $('header').css('background', '#000');
    }
    
    if($(element).hasClass('job-two')){
        console.log('Hello!');
        $('header').css('background', '#DDD');
    }
}
</script>

＆＃13;

如何使用.hasClass与$（this）？

3 个答案: