时间戳

首页 > 解决方案 > 单击按钮时图像未替换

jquery - 单击按钮时图像未替换

问题描述

我有 3 个按钮，当单击其中一个按钮时，图像将替换旧按钮。

我创建了按钮，但它不起作用

jQuery

jQuery(document).ready(function($){

$('.black-button').on({
     'click': function(){
         $('#bar').attr('src','flash-red.png');
     }
 });

$('.red-button').on({
     'click': function(){
         $('#bar').attr('src','flash-red.png');
     }
 });

$('.blue-button').on({
     'click': function(){
         $('#bar').attr('src','flash-red.png');
     }
 });

$('.yellow-button').on({
     'click': function(){
         $('#bar').attr('src','flash-red.png');
     }
 });
});

在正文中，我编写了用于在单击按钮时闪烁和更改图像的代码

身体

<div class="button-container">
                <button class="black-button"></button>
                <button class="red-button"></button>
                <button class="blue-button"></button>
                <button class="yellow-button"></button>
         </div>


<button id="flash-toggle" onclick="$('.bar1').toggleClass('blinking')">
    Toggle Blinking
</button>

在 css 中应用属性

css

#btn-show {
    display: none;
}
.tgl
{
  display:inline;
}

   .bar1,.bar2{
    opacity: 0.002;;
    height:100px;
    width:100px;
    }
    @keyframes blinkingFrames {
    0% {opacity: 0.00;}
    50% {opacity: 1.00;}
    100% {opacity: 0.00;}
}

.blinking {
    animation-name: blinkingFrames;
    animation-duration: 1s;

    animation-iteration-count: infinite;
}

标签： jquerycss

解决方案

如评论中所述，您的语法错误。应该：

$(element).on(event, function)

请参阅下面的工作代码：

  1. 单击颜色按钮
  2. 点击“切换”
  3. 看图片闪烁

我没有你的图片，所以链接的图片来自维基媒体。将其替换为您想要/需要的图像。

jQuery(document).ready(function($) {

  $('.black-button').on('click', function() {
    $('#bar').prop('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/The_Ladder_of_Divine_Ascent.jpg/440px-The_Ladder_of_Divine_Ascent.jpg');

  });

  $('.red-button').on('click', function() {
    $('#bar').prop('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/The_Ladder_of_Divine_Ascent.jpg/440px-The_Ladder_of_Divine_Ascent.jpg');

  });

  $('.blue-button').on('click', function() {
    $('#bar').prop('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/The_Ladder_of_Divine_Ascent.jpg/440px-The_Ladder_of_Divine_Ascent.jpg');

  });

  $('.yellow-button').on('click', function() {
    $('#bar').prop('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/The_Ladder_of_Divine_Ascent.jpg/440px-The_Ladder_of_Divine_Ascent.jpg');

  });
})
button {
  min-width: 10px;
  min-height: 10px;
}

.black-button {
  background: black
}

.red-button {
  background: red
}

.blue-button {
  background: blue
}

.yellow-button {
  background: yellow
}

#btn-show {
  display: none;
}

.tgl {
  display: inline;
}

.bar1,
.bar2 {
  opacity: 0.002;
  ;
  height: 100px;
  width: 100px;
}

@keyframes blinkingFrames {
  0% {
    opacity: 0.00;
  }
  50% {
    opacity: 1.00;
  }
  100% {
    opacity: 0.00;
  }
}

.blinking {
  animation-name: blinkingFrames;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="button-container">
  <button class="black-button"></button>
  <button class="red-button"></button>
  <button class="blue-button"></button>
  <button class="yellow-button"></button>
</div>

<button id="flash-toggle" onclick="$('.bar1').toggleClass('blinking')">
    Toggle Blinking
</button>
<img id="bar" class="bar1" src="flash-red.png" alt="bar" >

推荐阅读