如何使用js顯示特定的divonclick-有解無憂

我有多個

里面有各種div。單擊或多或少的標簽時，我想顯示特定的

即 display_on_click

我只想在洗掉該類并隱藏 div 之后添加該類 2 分鐘

我的 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 分鐘內添加該課程

uj5u.com熱心網友回復：

我會這樣做：

$('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>. 您可以使用最近的來抓住它。一旦我在父 li 中，我會找到具有 .display... 類（elementToManipulate 物件）的孩子。

然后我添加類并創建一個 setTimeout 以在 120.000 毫秒（60 秒 * 2 * 1000 毫秒）后洗掉類

uj5u.com熱心網友回復：

創建一個根據您的點擊目標觸發的切換函式，并使用 asetTimeout在指定時間后隱藏元素。

function toggle(el, type){
  var target = el.closest('.product_info').find('.display_on_click')
  if(type === "show") target.addClass('display_on_click_show')
  else target.removeClass('display_on_click_show')
}

$('body').on("click", ".more", function() {
  var obj = $(this)
  toggle(obj, "show")
  setTimeout(function(){
    toggle(obj, "hide")
  }, 1000) // This hides after one second, you can set it to 2*60*1000 for 2 minutes
})

$('body').on("click", ".less", function() {
  toggle($(this), "hide")
});

a{ cursor: pointer; }

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

uj5u.com熱心網友回復：

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

我希望這會奏效??

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/468483.html

標籤：javascript html jQuery css

上一篇：Symfony，用戶的約束

下一篇：如何根據縱橫比更改網站？