如何使用js显示特定的div onclick

Question

我有多个

里面有不同的div。在点击或多或少的标签，我想显示特定的

即。display_on_click我想在2分钟内添加这个类然后删除这个类并隐藏div

我的HTML代码如下:

$('body').on("click", ".more, .less", function() {
var obj = $(this);
obj.closest('.product_info').find('.display_on_click').addClass('display_on_click_show');
});

.display_on_click {
display: none
}
.display_on_click.display_on_click_show {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<ol class="item_wrapper">
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
</ol>
</div>

谁知道我做错了什么，让我知道。我想在2分钟内添加这个类然后删除这个类并隐藏

Answer 1

我会这样做:

$('body').on("click", ".more, .less", function() {
let parentLi = $(this).parent().parent();
let elementToManipulate = obj.find('.display_on_click');
elementToManipulate.addClass('display_on_click_show');
setTimeout(()=> {
elementToManipulate.removeClass('display_on_click_show')
}, 120000);
});

而不是使用最接近我抓住父的父是<li>。你可以用"最接近"来抓取它。一旦我进入父级，我就找到了带有.display…类(元素操纵对象)。

然后我添加类并创建setTimeout以在120,000毫秒(60sec * 2 * 1000msec)后删除类

Answer 2

<button onClick='OpenDiv'>Open</button>
function OpenDiv(){
let div = document.getElementById('BoxOne')
if (div.style.display == 'flex') {
div.style.display = 'none';
else
div.style.display = 'flex';
}

我希望这将工作👍