Question

当我单击“ .switch” ...时，我试图在类之间进行切换。

当我在单击选择器时使用img时，它会起作用：

$('img').click(function () {
    $(this).toggleClass('casual')
})

但是当我尝试使用我拥有的.switch类时，它将无法正常工作

$('.switch').click(function () {
    $('img').toggleClass('casual')
})

$('img').click(function () {
    $(this).toggleClass('casual')
})

$('.switch').click(function () {
    $('img').toggleClass('casual')
})

.casual {
  background-image: url("images/pinkclouds.jpg");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cover">
  <div class="intro">
    <img class="formal" src="images/photo.png" alt="profile-image" />
    <h2>Hello</h2>
  </div>
  <label class="switch">
    <input type="checkbox" />
    <span class="slider round"></span>
  </label>
</div>

Answer 1

据我了解，我认为您想更改图片的src。在这种情况下，您可以尝试使用下面的代码。

$('img').click(function () {
    $(this).toggleClass('casual')
})

$('#checkbox').click(function () {
    $('img').attr('src', 'https://archive.org/download/android_logo_low_quality/android_logo_low_quality.jpg')
})

.casual {
  background-image: url("https://archive.org/download/android_logo_low_quality/android_logo_low_quality.jpg");
}

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<img src="https://pbs.twimg.com/profile_images/711687178921717760/DLSZLtLQ_400x400.jpg">
<div class="cover">
  <div class="intro">
    <h2>Hello</h2>
  </div>
  <label class="switch">
    <input type="checkbox" id="checkbox" />
    <span class="slider round"></span>
  </label>
</div>

让我知道您是否想要其他东西。

我的javaScript中的.toggleClass无法正常工作

1 个答案: