jquery - 单击按钮时图像不会被替换

Question

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

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

body

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

Answer 1

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

$(元素).on(事件, 函数)

见下面的工作代码:

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