当我单击“ .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>
答案 0 :(得分:0)
据我了解,我认为您想更改图片的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>
让我知道您是否想要其他东西。