html按钮执行jquery和javascript？

Question

您好，我试图制作一个同时做两件事的按钮

＆＃13;

＆＃13;

function clickimageone(l){
	alert("test");
	question1button1 = true;
}

＆＃13;

}
.border1{
	border: 1px solid red;
}
.border2{
	border: 1px solid red;
}
.border3{
	border: 1px solid red;
}
.border4{
	border: 1px solid red;
}
.image{
	float: left;
}

＆＃13;

<div class="image"><img src="img/500.png" onclick="clickimageone()" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
<div class="image"><img src="img/1500.png" onclick="clickimagethree(this)" class="border3" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
<div class="image"><img src="img/2000.png" onclick="clickimagefour(this)" class="border4" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>



<script>
		$('.border1').click(function(e){    
    $('.image, .border1, .border2, .border3, .border4').fadeOut('slow', function(){
        $('.image, .border2').fadeIn('slow');
    });
});


</script>

＆＃13;

＆＃13;

＆＃13;

所以基本上当人们按下图像时，它会执行jquery来淡入和淡出一些东西，同时执行一个java函数来提醒用户。所以我的问题是，我可以这样做，当用户点击图像时，它会淡出图片并淡入新图片并同时提醒用户。

Answer 1

使用addClass()和.removeClass()代替.fadeIn()和fadeOut()。定位img容器而不是img本身。

顺便说一句，如果你使用jQuery，你将永远不需要使用属性事件处理程序（即onclick）。

详情在演示

中发表

演示

＆＃13;

＆＃13;

// Counter
var idx = 0;
// Any <li> clicked...
$('li').on('click', function() {
  // Increment counter
  idx++;
  // Find the next <li>
  var next = $(this).next('li');
  // Remove the .on class on all img
  $('li').removeClass('on');
  // Add .on class to next <li>
  next.addClass('on');
  /* As you can see, the function runs both each time.
  || If you are looking for something that's simultaneous, 
  || then try another language because JavaScript is one thread.
  */ // The string is a template literal each click changes the count.
  alert(`Hey don't use alert it's annoying!Test with console.log() instead. This image ${idx}`);
});

＆＃13;

ul {
  list-style: none
}

li img {
  display: none;
}

.on img {
  display: block;
}

＆＃13;

<ul>
  <li class='on'><img src='http://placehold.it/150x150/000/fff?text=1'></li>
  <li><img src='http://placehold.it/150x150/0ff/000?text=2'></li>
  <li><img src='http://placehold.it/150x150/83d800/000?text=3'></li>
  <li><img src='http://placehold.it/150x150/f7a/000?text=4'></li>
  <li><img src='http://placehold.it/150x150/fc0/000?text=5'></li>
  <li><img src='http://placehold.it/150x150/f00/fff?text=6'></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Please try this...it works for me...I had included the jquery     

<style>
    }
    .border1{
        border: 1px solid red;
    }
    .border2{
        border: 1px solid red;
    }
    .border3{
        border: 1px solid red;
    }
    .border4{
        border: 1px solid red;
    }
    .image{
        float: left;
    }
    </style>
    <div class="image"><img src="img/500.png" onclick="clickimageone()" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
    <div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
    <div class="image"><img src="img/1500.png" onclick="clickimagethree(this)" class="border3" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
    <div class="image"><img src="img/2000.png" onclick="clickimagefour(this)" class="border4" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
            $('.border1').click(function(e){    
        $('.image, .border1, .border2, .border3, .border4').fadeOut('slow', function(){
            $('.image, .border2').fadeIn('slow');
        });
    });

Answer 3

请在您的html文件中包含jquery js

function clickimageone(l){
	
}
$('.img_cls').click(function(e){  
     alert("test");
	  question1button1 = true;
       $('.img_cls').fadeOut('slow', function(){
          $('.image, .border2').fadeIn('slow');
        });
});

}
.border1{
	border: 1px solid red;
}
.border2{
	border: 1px solid red;
}
.border3{
	border: 1px solid red;
}
.border4{
	border: 1px solid red;
}
.image{
	float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image"><img src="https://png.icons8.com/plus/win8/26"  class="border1 img_cls" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image "><img src="https://png.icons8.com/minus/ios7/100"  class="border2 img_cls" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
<div class="image img_cls"><img src="https://png.icons8.com/plus/win8/26"  class="border3 img_cls" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
<div class="image"><img src="https://png.icons8.com/minus/ios7/100"  class="border4 img_cls" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>



<script>
		

</script>

Answer 4

我在Visual Studio的HTML文档中有这个：

＆＃13;

＆＃13;

$('.border1').click(function(e) {
  $('.image, .border1, .border2, .border3, .border4').fadeOut('slow', function() {
    $('.image, .border2').fadeIn('slow');
  });
});

function clickimageone() {
  alert("test");
  question1button1 = true;
}

＆＃13;

.border1 {
  border: 1px solid red;
}

.border2 {
  border: 1px solid red;
}

.border3 {
  border: 1px solid red;
}

.border4 {
  border: 1px solid red;
}

.image {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image"><img src="img/500.png" onclick="clickimageone()" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
<div class="image"><img src="img/1500.png" onclick="clickimagethree(this)" class="border3" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
<div class="image"><img src="img/2000.png" onclick="clickimagefour(this)" class="border4" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>

＆＃13;

＆＃13;

＆＃13;

当我点击第一个div时，它会淡出，警告，并且一个div会重新进入。你的代码非常有效。

Answer 5

您可以链接fadeout和fadein个事件并检查第二个图像的fadeInComplete事件。

$('.border1').click(function (e) {
    $('.border1').fadeOut('slow', function () {
        $('.border2').fadeIn('slow', function () {
            $(this).trigger("fadeInComplete");
        });
    });

    $(".border2").on("fadeInComplete", function () {
        alert("test");
        question1button1 = true;
    });
});

＆＃13;

＆＃13;

$(function () {
	$('.border1').click(function (e) {
		$('.border1').fadeOut('slow', function () {
			$('.border2').fadeIn('slow', function () {
				$(this).trigger("fadeInComplete");
			});
		});

		$(".border2").on("fadeInComplete", function () {
			alert("test");
			question1button1 = true;
		});
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="image"><img src="chicago.jpg" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="ny.jpg" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
<div class="image"><img src="img/1500.png" class="border3" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
<div class="image"><img src="img/2000.png" class="border4" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>

＆＃13;

＆＃13;

＆＃13;