javascript - 如果我们处于默认状态并且没有选择其他选项，则不执行任何操作。如果从其他选项回到默认状态，请执行某些操作

Question

我的默认值是 2 var items = [2]，点击事件根据点击次数来回更改该值从 2 到 3。由于默认值为 2，因此当用户单击 li 中的 2 选项时，不会发生任何事情(这就是我想要的)，因为不需要进行任何更改。仅当用户单击任何其他选项时，他们才能够单击 2 选项来使用 2 功能(他们将能够单击它，但不会出现任何功能)。我想我需要逻辑方面的帮助

      $(document).ready( function(){
        var items = [2]
        $('ul  > li > span').on('click', function(e){

            if($(this).siblings("ul").is(":visible")){
                $(this).siblings("ul").slideUp("fast")
            }else{
                $(this).siblings("ul").slideDown("fast")
            }

        })
        $('ul.adding li ul li').on("click" , function(e){
            if($(e.target).hasClass('twoItems')){
                if(items[0] !== 2){
                    //this is messed up
                    items[0] = 2
                    $('.output').append(items[0])
                }else{
                    $('.output').append(items[0])
                }

            }
            if($(e.target).hasClass('threeItems')){
                items[0] = 3
                $('.output').append(items[0])
            }
            console.log(items)

        })
        $('.output').append(items[0])


    });

html:

<div class="container">
    <ul class = "adding">
        <li><span class = "span">Add</span> <ul>
            <li class="twoItems">Two Item</li>
            <li class = "threeItems">three items</li>
        </ul></li>

    </ul>
</div>

<div class="output"></div>

Answer 1

尝试从 $('ul.adding li ul li').on("click" handler 中删除 else 语句

$(document).ready(function() {
  var items = [2]
  $('ul  > li > span').on('click', function(e) {

    if ($(this).siblings("ul").is(":visible")) {
      $(this).siblings("ul").slideUp("fast")
    } else {
      $(this).siblings("ul").slideDown("fast")
    }

  })
  $('ul.adding li ul li').on("click", function(e) {
    if ($(e.target).hasClass('twoItems')) {
      if (items[0] !== 2) {
        items[0] = 2
        $('.output').append(items[0])
      }

    }
    if ($(e.target).hasClass('threeItems')) {
      items[0] = 3
      $('.output').append(items[0])
    }
    console.log(items)

  })
  $('.output').append(items[0])


});

<div class="container">
  <ul class="adding">
    <li><span class="span">Add</span> 
      <ul>
        <li class="twoItems">Two Item</li>
        <li class="threeItems">three items</li>
      </ul>
    </li>

  </ul>
</div>

<div class="output"></div>

<div class="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <ul class="adding">
    <li><span class="span">Add</span> 
      <ul>
        <li class="twoItems">Two Item</li>
        <li class="threeItems">three items</li>
      </ul>
    </li>

  </ul>
</div>

<div class="output"></div>