我正在尝试实现网格系统,如果我点击其中一个div,它会放大而其他div消失。
如何单独选择这两个元素以便
var slider= $('.image_slide');
slider.on('click', function(){
slider.css('opacity', 0);
});

.slider_images{
height:200px;
width:200px;
}
.image_slide{
padding:40px;
display:block;
background-color:#555;
width: 40%;
margin-top:20px;
color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider_images>
<a href= "#" class="image_slide">IMAGE 1 </a>
<a href= "#" class="image_slide">IMAGE 2 </a>
<a href= "#" class="image_slide">IMAGE 3 </a>
<a href= "#" class="image_slide">IMAGE 4 </a>
</div>
&#13;
这里通过单击其中一个div,我希望单击的div放大而其他div消失。 Javascript和Jquery如何捕获当前的点击事件,同时选择其他元素进行另一次交互?
由于
答案 0 :(得分:0)
你可以使用css和一些js代码实现它而不需要任何jQuery。但您可以使用jQuery功能调整此代码。
document.querySelectorAll(".item").forEach((element, n, all) => {
element.addEventListener("click", () => {
all.forEach(item => item.classList.remove("selected"))
element.classList.add("selected");
});
});
.container{
border: 2px solid black;
display: inline-block;
position: relative;
}
.item {
display: inline-block;
background: red;
width: 80px;
height: 80px;
margin: 20px;
transition: 1s;
color: white;
padding: 10px;
opacity: 0.5;
}
.item.selected {
transform: scale(1.3);
opacity: 1;
box-shadow: 0 0 10px black;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
请注意,旧浏览器可能不支持querySelectorAll
,pointer-events
,classList
,但您可以使用较旧的js方法修复它。
答案 1 :(得分:0)
您可以向所有div
添加点击事件,然后在点击事件中选择所有这些事件并让它们淡出。要获得点击放大的那个,您可以使用this
选择它,只需还原淡出并进行放大。
document.getElementsByTag("div").addEventListener("click", function() {
var divs = document.getElementsByTag("div"); //This are all your divs
divs.foreach(function() {
this.classList.remove("zoom-in"); //Could be that a element is already zoomed in what have to be reseted first
this.classList.add("fades-out"); //Or However you do your fade out
}
this.classList.remove("fade-out");
this.classList.add("zoom-in"); //Add your zoom effect
)};
我假设您在此示例中使用css
制作动画。