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

尝试从else处理程序

中删除$('ul.adding li ul li').on("click"语句

＆＃13;

$(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])


});

＆＃13;

<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>

＆＃13;

如果我们处于违约状态并且没有选择其他选项，则不执行任何操作。如果从其他选项中恢复默认，请执行某些操作

1 个答案: