如何跟踪每个被点击的项目之前是否被点击过(或者是第一次点击)

Question

我有一个获得每个链接点击的第一次点击的问题，我已经尝试了一次点击事件.one()，但由于我阻止默认情况下它会导致重定向。我想要得到添加的东西，如果项目点击等于1和删除，如果点击超过一次每个链接。

// $('.menu>li>a').one('click', function(e){}); 
let clickCount = 0;
$('.menu>li>a').on('click', function(e) {
clickCount++;
let $this = $(this);
if (clickCount == 1) {
//show loader
$('.loader').show();
setTimeout(function() {
$('.loader').hide();
}, 5000);
$this.next('.dropdown').addClass('active');
} else {
$this.next('.dropdown').addClass('active');
}
e.preventDefault()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li><a href="">item1</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item2</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item3</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
</ul>

Answer 1

尝试使用jQuery的数据存储来知道链接之前是否被点击过。这将允许您单独跟踪每个链接:

// $('.menu>li>a').one('click', function(e){}); 
$('.menu>li>a').on('click', function(e) {
let $this = $(this);
const firstClick = !$this.data('clickedBefore');
if (firstClick) {
$this.data('clickedBefore', true)
//show loader
$('.loader').show();
setTimeout(function() {
$('.loader').hide();
}, 5000);
$this.next('.dropdown').addClass('active');
} else {
$this.next('.dropdown').addClass('active');
}
e.preventDefault()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li><a href="">item1</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item2</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item3</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
</ul>

更新:

---

是否有另一种选择而不使用数据(' clickkedbefore '， true)并添加类链接以实现相同的结果?

是的。一般来说，如果您只需要一些控件属性，那么使用data比添加类更简洁。但是，如果您打算为元素设置样式，或者如果您的项目已经在其他地方使用类来控制(因此保持一致性很重要)，那么使用它们来代替它们可能是有意义的:

// $('.menu>li>a').one('click', function(e){}); 
$('.menu>li>a').on('click', function(e) {
let $this = $(this);
const firstClick = !$this.hasClass('clicked-before');
if (firstClick) {
$this.addClass('clicked-before');
//show loader
$('.loader').show();
setTimeout(function() {
$('.loader').hide();
}, 5000);
$this.next('.dropdown').addClass('active');
} else {
$this.next('.dropdown').addClass('active');
}
e.preventDefault()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li><a href="">item1</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item2</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item3</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
</ul>

Answer 2

您可以为这两个用例添加两个事件侦听器。一个用于禁用默认行为，另一个用于您想要捕获的单击。

let clickCount = 0;
$('.menu > li > a').on('click', function(e) {
console.log('checking click for things');
clickCount++;
let $this = $(this);
if (clickCount === 1) {
console.log('Only the first click will show the loader');
$('.loader').show();
setTimeout(function() {
$('.loader').hide();
}, 5000);
$this.next('.dropdown').addClass('active');
} else {
$this.next('.dropdown').addClass('active');
}
});
$('.menu > li > a').on('click', function(e) {
e.preventDefault();
console.log('All clicks will prevent default');
});

.loader {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li><a href="">item1</a>
<ul class="dropdown">
<li><a href="#">content1</a></li>
</ul>
</li>
<li><a href="">item2</a>
<ul class="dropdown">
<li><a href="#">content1</a></li>
</ul>
</li>
<li><a href="">item3</a>
<ul class="dropdown">
<li><a href="#">content1</a></li>
</ul>
</li>
</ul>
<div class="loader">Loader</div>