Question

我是jQuery的初学者，试图通过点击我制作的按钮来改变图像背景。当我点击图像时它会改变，但我无法使用按钮。谢谢。我是新手。遗憾

＆＃13;

$(document).ready(function() {
  $('#img').on({
    click: function() {
      $(this).addClass('alternate').removeClass('cali')
    }
  });
});

＆＃13;

button {
  background-color: blue;
  height: 50px;
  width: 150px;
}

.img {
  background-size: cover;
  height: 100%;
  width: 100%;
}

.cali {
  background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2016/02/california_wallpaper_21.jpg");
}

.alternate {
  background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2016/02/california_wallpaper_15.jpg");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div href="#" class="img cali"></div>
<button id="change">Change</button>

＆＃13;

Answer 1

试试这个。你的#img必须是.img。根据您的代码

$(document).ready( function() {
$('.img').on({
click: function(){
$(this).addClass('alternate').removeClass('cali') }
});             
});

Answer 2

在下面的代码中，我修复了代码中的错误。

试试这个

$(document).ready( function() {
  $('.img').on('click', function(){
     $(this).addClass('alternate').removeClass('cali')
  });
});

演示here

此外，toggleClass也有效，就像@ Bilal的回答一样。但它不断切换。

Answer 3

看起来你只是有一些语法错误。您正在使用img的类，因此请使用点而不是标签。您的点击功能也需要如下所示。

应该更像这样：

$(document).ready( function() {
    $('.img').on( 'click', function() {
        $(this).addClass('alternate').removeClass('cali');
    });
});

Answer 4

如果我理解您的要求，您可以尝试以下

$(document).ready(function() {
  $('#change').on(
    'click',
    function() {
      $('.img').toggleClass('alternate')
    }
  );
});

button {
  background-color: blue;
  height: 50px;
  width: 150px;
}

.img {
  background-size: cover;
  height: 500px;
  width: 100%;
  background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2016/02/california_wallpaper_21.jpg");
}

.alternate {
  background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2016/02/california_wallpaper_15.jpg");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="img cali"></div>
<button id="change">Change</button>

Answer 5

您必须将点击事件应用于button而不是div。您可以使用toggleClass在课程之间切换

这是代码。

$(document).ready(function(){
    $("button").click(function(){
        $(".img").toggleClass("alternate");
    });
});

如果是多个按钮，您可以使用按钮的ID #change。

以下是代码：

$(document).ready(function(){
     $("#change").click(function(){
         $(".img").toggleClass("alternate");
     });
});

Answer 6

使用if语句添加或删除alternate和cali类。
如果你想将.img元素的高度设置为100％，你也应该将它所有父母的身高设置为100％（包括html，body标签）

＆＃13;

$(document).ready(function() {
  $('#change').click(function () {
      if ($('.img').hasClass ("alternate")) {
        $('.img').removeClass('alternate');
        $('.img').addClass('cali');
      }
      else {
        $('.img').removeClass('cali');
        $('.img').addClass('alternate');
      }
  });
});

＆＃13;

html,body { height: 100% }
button {
  background-color: blue;
  height: 50px;
  width: 150px;
}

.img {
  background-size: cover;
  height: 100%;
  width: 100%;
}

.cali {
  background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2016/02/california_wallpaper_21.jpg");
}

.alternate {
  background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2016/02/california_wallpaper_15.jpg");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div href="#" class="img cali"></div>
<button id="change">Change</button>

＆＃13;

Jquery更改图像

6 个答案: