javascript - 使事件在第一次单击的元素上发生，但仅当单击另一个元素时才再次触发该事件

Question

假设我有 5 个跨度元素。每个元素都有一个事件监听器，例如`

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

选项 1 的事件也是页面加载时发生的默认事件，因此如果没有单击其他选项，您将无法创建该事件，因为该事件已经在进行并且未选择另一个选项。如果用户选择另一个选项，那么他们可以选择 option1 。单击其他选项也会发生类似的情况。假设您选择了选项 5，该事件应该发生一次。如果您再次单击选项 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>