檢查以查看當前單擊元素等於以前被點擊元素的Javascript

Question

我用的容器列表的外觀每container.A片段相關的下拉列表顯示在一個集裝箱中的物品清單：

http://jsfiddle.net/jHpKB/2/

當我點擊按鈕時，下拉菜單顯示出來，但是，當我嘗試點擊任何其他按鈕按鈕時，dd保持並且不隱藏。該列表是動態創建的。我正在嘗試做的是，如果當前點擊的元素與先前點擊的元素相同，然後隱藏第一個dd菜單 有沒有辦法檢查點擊的元素是否等於JavaScript中的前一個點擊的元素（沒有jQuery ）

代碼：

afterRender: function() { 
    this.el.on('click', function(e) { 
    //here i want to check (if e.getTarget() === secondClickedEment) { //do something}   
    },this); 
} 

這可能嗎？ 謝謝

Answer 1

你可以使用jQuery測試對象的等同性，使用是函數。需要1.6或更高。

var stuff = $('#stuff'); 
var thing = stuff; 


if (stuff.is(thing)) { 
    // the same 
} 

因此，對於你的情況這應該工作：

afterRender: function() { 
    this.el.on('click', function(e) { 
     var clickedElm = $(e.getTarget()); 
     var secondElm = $(secondClickedElm); 
     if (clickedElm.is(secondElm)){ 
      // same elements 
     }     
    },this); 
} 

Answer 2

一種方式做，這將是動態添加/刪除類到div，表示如果它是開放與否。然後點擊，您可以切換該類。

例子：

let containers = document.getElementsByClassName('container'); 
for (let i=0; i<containers.length; i++) { 
    let button = containers.item(i).getElementsByClassName('button')[0]; 
    let menu = containers.item(i).getElementsByClassName('menu' )[0]; 
    button.addEventListener('click', function() { 
     menu.classList.toggle('open'); 
    }); 
} 

然後在你的CSS：

.open { 
    display: block; 
} 

Answer 3

jQuery的例子：

使用var lastClicked;保持最後點擊的元素，然後每按一下檢查，如果同一點擊然後重置lastclicked，否則更新lastclicked。

var lastClicked; 
 
$('.container').on('click', function(e) { 
 
    if (this == lastClicked) { 
 
    lastClicked = ''; 
 
    $(this).children('.menu').hide(); 
 
    } else { 
 
    lastClicked = this; 
 
    $('.menu').hide(); 
 
    $(this).children('.menu').show(); 
 
    } 
 
});

.container { 
 
    border: 1px solid #333; 
 
    height: 300px; 
 
    width: 200px; 
 
    float: right; 
 
    margin-right: 20px; 
 
} 
 

 
.menu { 
 
    display: none; 
 
} 
 

 
.button { 
 
    border: 1px solid #333; 
 
    background: #333; 
 
    float: right; 
 
    height: 20px; 
 
    width: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="button"> 
 

 
    </div> 
 
    <div class="menu"> 
 
    <div class="option1 option">option1</div> 
 
    <div class="option2 option">option2</div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="button"> 
 

 
    </div> 
 
    <div class="menu"> 
 
    <div class="option1 option">option1</div> 
 
    <div class="option2 option">option2</div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="button"> 
 

 
    </div> 
 
    <div class="menu"> 
 
    <div class="option1 option">option1</div> 
 
    <div class="option2 option">option2</div> 
 
    </div> 
 
</div>