Question

由于某种原因，以下代码同时触发了两种情况；

所以从我的li开始没有课程，然后在单击时添加了“ disabled”（禁用）课程，但是第一次单击时也会弹出警报？

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

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

Answer 1

我认为您的事件监听器被触发了两次，因为click事件首先触发了<li>（e.target），然后事件又冒泡回到ul.select（e.currentTarget）。您需要将click事件委托给列表，并在事件数据参数中指示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>

单击时，如果有课程然后发出警报，否则添加课程问题

1 个答案:

演示