问html按钮执行jquery和javascript？

EN

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

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

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>