如何检测点击的 div 是否高于或低于特定的 div？

Question

我有一个这样的 html 结构：

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>
<div class="seat-row">
    <div class="exit-row"><div class="exit-title">Exit</div></div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="exit-row"><div class="exit-title">Exit</div></div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div><div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

我想检测我单击“.seat-row”的 div 是在“.exit-row”的“上方”、“下方”还是“之间”。

我必须使用 javascript，而不是 jquery 或其他库

我尝试在“.exit-row”父级“.seat-row”之后添加类“exit-door”并拆分类

Answer 1

我不完全确定这里的目标，但我专注于回答“我想检测我点击'.seat-row'的div是'above'，'below'还是'between''.exit-row'”。

您可以遍历所有 .seat-row 元素并附加一个事件侦听器以获取当前元素的索引以及出口的索引。从那里，您只需将当前指数与那些出口指数进行比较，看看您是在出口上方、下方还是在出口之间。

此代码假设一切都与您提供的 HTML 完全一样，因此唯一可以使用的是类（没有用于标识的 id 属性）。

document.querySelectorAll(".seat-row").forEach(el => {
  if(!el.querySelector(".exit-row")) el.addEventListener("click", e => {
    let saveIndex,
        exitIndexes = []
    document.querySelectorAll(".seat-row").forEach((list, index) => {
      if(list.querySelector(".exit-row")) exitIndexes = [...exitIndexes, index]
      if(list == e.target.closest(".seat-row")) saveIndex = index
    })
    
    console.log(`above: ${(exitIndexes.filter(i => i < saveIndex).length <= 0) ? "Yes" : "No"} | below: ${(exitIndexes.filter(i => i > saveIndex).length <= 0) ? "Yes" : "No"} | between: ${(exitIndexes.filter(i => i < saveIndex).length > 0 && exitIndexes.filter(i => i > saveIndex).length > 0) ? "Yes" : "No"}`)
  })
})

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>
<div class="seat-row">
    <div class="exit-row"><div class="exit-title">Exit</div></div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="exit-row"><div class="exit-title">Exit</div></div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div><div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>