使用javascript為每個元素添加樣式-有解無憂

我想將類添加到我的 div 但我有這么多 div 并且任何時候單擊按鈕都只是在 html 中的一個 div 上添加或洗掉我該怎么辦？有沒有辦法使用價值或身份證？例如命令中的那個鏈接

如果你鎖定我必須按按鈕來顯示和隱藏潛水，但無論點擊哪一個，它只是將類添加到第一個

uj5u.com熱心網友回復：

如果您的意思是切換類slow，您可以使用e.target切換next()元素，例如：

$('.toggle').click(function(e) {
    $(e.target).next().toggle('slow');
});

body {padding:30px;}

#target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle">Show &amp; Hide</button>
<div>
  <p>test1</p>
</div>
  
</div>
<div>
  <button class="toggle">Show &amp; Hide</button>
<div>
  <p>test2</p>
</div>
</div>

或者你可以data-target像這樣使用：

$('.toggle').click(function(e) {
    $('#'  e.target.dataset.target).toggle('slow');
});

body {padding:30px;}

.target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle" data-target="target-1">Show &amp; Hide</button>
<div id="target-1" class="target">
  <p>test1</p>
</div>
  
</div>
<div>
  <button class="toggle" data-target="target-2">Show &amp; Hide</button>
<div id="target-2" class="target">
  <p>test2</p>
</div>
</div>

您必須學習的另一條規則，id 必須是唯一的。

參考：

事件.目標
。下一個（）
使用資料屬性
ID

uj5u.com熱心網友回復：

您可以擁有許多具有相同類的 div，但如果您希望對特定 div 做更具體的事情，則必須使用 id 或單獨的類。閱讀有關 CSS 選擇器的更多資訊

<div class="blue" id="standout">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>

.blue{
text-align: center;
}

 #standout{
text-overflow: ellipsis;
 }

uj5u.com熱心網友回復：

像這樣向按鈕添加一個類（或 id）：

<button class="foo-class" id="foo-id">Click me</button>

然后您可以使用以下 javascript 訪問單擊按鈕：

// class
document.querySelector('.foo-class').click(
  // do something
);

// id 
document.getElementById("foo-id").click(
   // do something
);

請參閱此處以獲取 id 的參考，并在此處查看類的參考。

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

標籤：javascript html

上一篇：如何過濾顏色小于20的資料？

下一篇：如何將后端創建用戶函式連接到前端（Node.js、React.js、MongoDB）