[英]how to hide image which is on top of another image when clicked another image
i have six images as dot on which i have applied animation on click. 我有6个图像作为点,我点击了动画。 all the six images have there respective text which glow/color:white when clicked on its respective dot/image now the problem is i have a image/icon on a image/dot which is not hiding when i click on another image/dot
所有六个图像都有相应的文字发光/颜色:白色点击其各自的点/图像现在问题是我有一个图像/点上的图像/图标,当我点击另一个图像/点时没有隐藏
two problems - 1. icon not hiding 2. dot/image not clickable again when clicked on another image/dot 两个问题 - 1.图标无法隐藏2.点击另一个图像/点时,点/图像无法再次点击
Providing a video for better understanding ( https://streamable.com/ab999 ) 提供视频以便更好地理解( https://streamable.com/ab999 )
in this video you will see i have a dot/image with its respective text ( build ) i have coded it like when page load it automatically gets clicked and animation happen.( which is happening as it is supposed to be happening ) 在这个视频中,你会看到我有一个点/图像及其各自的文本(构建)我编码它就像页面加载它自动被点击和动画发生。(这应该发生的事情正在发生)
you will see when i click any other image/dot (black icon on build text image/dot not hiding) and the build text image/icon is not clickable again because the black/icon is there and making it unclickable 你会看到当我点击任何其他图像/点(构建文本图像上的黑色图标/点不隐藏)和构建文本图像/图标不能再次点击,因为黑色/图标在那里并使其无法点击
Jquery i'm trying is this 我正在尝试的Jquery就是这个
$(function() {
if($("#img1").click()){
$(".icon").css("display","block");
console.log("if");
}
else{
$(".icon").css("display","none");
console.log("else");
}
});
i have put console.log just to check but my console only shows ("if") never goes to ("else") 我已经把console.log只是检查,但我的控制台只显示(“如果”)永远不会去(“其他”)
.icon is class of black icon which is on top of build image and having css property position:relaive .icon是一个黑色图标类,它位于构建图像的顶部,具有css属性位置:相对
<li class="paralx-dots"><span class="icon-text" id="1">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" class="Active" data-box="div1" id="img1" tabindex="0"><span class="icon-position"><img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img></li>
i want when i click on any another image/dot the black icon hides (display none) and when i click again on dot/image ( build ) it appear again 我希望当我点击任何其他图像/点时,黑色图标隐藏(显示无),当我再次点击点/图像(构建)时,它再次出现
The reason why it always prints "if" is that $.click() is actually the shortcut of .trigger( "click" ), which will always return a jQuery object. 它始终打印“if”的原因是$ .click()实际上是.trigger(“click”)的快捷方式,它将始终返回一个jQuery对象。
jQuery click reference jQuery单击引用
It appears to me that you actually want to use an event handler. 在我看来,你实际上想要使用事件处理程序。 Try things like
$(".icon").on('click', yourFunction)
尝试
$(".icon").on('click', yourFunction)
try this 尝试这个
$(function() { $(".icon").css("display","none"); $("#img1").on("click", function() { $(".icon").css("display","block"); console.log("click"); })) });
You have to add action click to images like this. 你必须添加动作点击这样的图像。
$('img').click(function () {
if (this.id === 'img1') {
$(".icon").css("display","block");
} else {
$(".icon").css("display","none");
}
})
Note that $("#img1").click()
will trigger click. 请注意
$("#img1").click()
将触发click。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.