你好,我想做一个同时做两件事的按钮
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 函数来提醒用户。所以我的问题是,我能否做到这样,当用户点击图片时,它会淡出图片并淡入新图片,同时提醒用户。
最佳答案
使用 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>
关于javascript - html按钮执行jquery和javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46249961/