javascript - html按钮执行jquery和javascript？

Question

你好，我想做一个同时做两件事的按钮

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

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

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

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

Answer 1

使用 addClass() 和 .removeClass() 而不是 .fadeIn() 和 fadeOut() .针对 img 容器而不是 img 本身。

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

演示中评论的细节

演示

// 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}`);
});

ul {
  list-style: none
}

li img {
  display: none;
}

.on img {
  display: block;
}

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