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

我体内已经编写了用于闪烁的代码，并在单击按钮的同时更改了图像

身体

<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

如注释中所述，您的语法错误。应该是：

void OnCollisionEnter2D(Collision2D col) { if (col.collider.tag == "groundTag") { if (Input.GetKeyDown(KeyCode.Space)) { rb2d.AddForce(new Vector2(rb2d.velocity.x, Jumpforce)); } }

请参见以下工作代码：

单击颜色按钮
点击“切换”
看到图像闪烁

我没有您的图像，所以链接的图像来自wikimedia。将其替换为您想要/需要的图像。

$(element).on(event, function)

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

单击按钮时图像未替换

1 个答案: