时间戳

首页 > 解决方案 > 单击时，如果有课程则提醒，否则添加课程问题

javascript - 单击时，如果有课程则提醒，否则添加课程问题

问题描述

出于某种原因，下面的代码同时触发了两个条件；

所以从我的 li 没有类开始，然后点击类“禁用”正在添加，但第一次点击时也会弹出警报？

    $('.select li').on( "click", function() {
    if ( $(this).hasClass('disabled') ) {
      alert("This is disabled");
    }
    else {
      $(this).addClass('disabled');
    }   
    });

如果第一次单击时该类尚不存在，则应添加该类，然后如果再次单击，则应弹出警报以说明此 li 已禁用该类

标签： javascriptjquery

解决方案

我认为您的事件侦听器被触发了两次，因为单击事件首先触发了<li>（e.target），然后事件冒泡回到ul.select（e.currentTarget）。您需要将点击事件委托给列表，并在事件数据参数中指明li。看演示

演示

$('.select').on('click', 'li', disableItem);

function disableItem(e) {
  if ($(this).hasClass('disabled')) {
    return console.log('Item is already disabled');
  } else {
    $(this).addClass('disabled');
    return console.log('Item has been disabled');
  }
};
.select {
  list-style: none
}

.select li {
  line-height: 1.5;
}

.disabled {
  background: rgba(0, 0, 0, 0.2);
}

.as-console-wrapper {
  width: 350px;
  min-height: 100%;
  margin-left: 45%;
}

.as-console-row.as-console-row::after {
  content: '';
  padding: 0;
  margin: 0;
  border: 0;
  width: 0;
}
<ul class='select'>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读