Question

假设我有5个span元素。每个元素都有一个像`

这样的事件监听器

$('.option1').on("click", function(){
    option1()
})

选项1的事件也是页面加载时发生的默认事件，因此如果没有单击其他选项，您将无法进行事件，因为事件已在进行且未选择其他选项。如果用户选择另一个选项，那么他们可以选择option1。点击其他选项会发生类似的事情。假设您选择了option5，事件应该发生一次。如果再次单击选项5，则不会触发任何事件，但如果单击选项2或其他选项，则单击选项5，应触发选项5事件。对于所有选项，同样的事情接受第一个选项。第一个选项不应在第一次单击时触发，因为它是默认值。只有在按下另一个选项后才会触发。

我尝试过像在其他选项中放置一个值并检查当前正在触发的选项中是否具有在其他选项中设置的值，如果是，则触发事件并重置选项。我的逻辑有问题。你的解决方案是什么？

下面的

只是您可能想要或可能不想使用的模板。它只有span元素。功能和事件。

        $(document).ready( function(){
        var o2Clicked =[]
         function option1(){
            alert("option1 function")
        }
        function option2(){
            alert("option2 function")
        }
        function option3(){
            alert("option3 function")
        }
        function option4(){
            alert("option4 function")
        }
        function option5(){
            alert("option5 function")
        }
        //call function for default
        option1()
        $('.option1').on("click", function(){
            option1()
        })

        $('.option2').on("click", function(){
            //o1Cliced[0] = 1
            option2()
        })
        $('.option3').on("click", function(){
            o2Clicked[0] =2
            option3()
        })
        $('.option4').on("click", function(){
            o2Clicked[0] =3
            option4()
        })
        $('.option5').on("click", function(){
            o2Clicked[0] =4
            option5()
          })

    });

HTML

<span class="option1">option1</span>
<span class="option2">option2</span>
<span class="option3">option3</span>
<span class="option4">option4</span>
<span class="option5">option5</span>

式

span{
        margin-left: 30px;
    }

Answer 1

您可以声明一些变量并在“true”和“false”之间更改其值以保持跟踪条件。

例如：

var specialvar = false;

$('#one').on('click', function(){
  if(!specialvar) {
    alert('buttons 2 and 3 will now work');  
    specialvar = true;
  }
});

$('#two').on('click', function() {
  if(specialvar) {
    alert('only button 1 will now work');
    specialvar = false;
  }  
});
  
$('#three').on('click', function() {
  if(specialvar) {
      alert('i just work if var is true');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one" href="#">1</button>
<button id="two" href="#">2</button>
<button id="three" href="#">3</button>

Answer 2

与我的评论一样，我会使用一个班级来跟踪点击的跨度。

$('span').on('click',function(){
  if(!$(this).hasClass('active')){
    $('span').removeClass('active');
    $(this).addClass('active');
    alert($(this).text()+' function');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="option1">option1</span>
<span class="option2">option2</span>
<span class="option3">option3</span>
<span class="option4">option4</span>
<span class="option5">option5</span>

在第一次单击时在元素上发生事件，但仅在单击另一个元素时再次触发该事件

2 个答案: