javascript - 如何点击同一个元素触发不同的功能？

Question

<div class="slide_button_wrapper left first" ><p class="text">Text1</p></div>
<div class="slide_button_wrapper right first" ><p class="text">Text2</p></div>
<div class="slide_button_wrapper left second"><p class="text">Text3</p></div>
<div class="slide_button_wrapper right second" ><p class="text">Text4</p></div>
<div class="slide_button_wrapper left third" ><p class="text">Text5</p></div>

我想做的是，当我单击 Text1 时，Text1 的颜色将变为红色，当我单击另一个文本(例如 Text3)时，Text3 的颜色将变为蓝色，但 Text1 仍将是红色，然后，当我第三次单击任何 div 时，应该不会发生任何事情。不知道该怎么做，提前谢谢!

Answer 1

您应该为 div 绑定(bind) click 事件处理程序，并使用 css() 方法来获取/设置 code> div 的颜色。

var colors=['red','blue'];
var i=0;
$('div').click(function(){
    if($(this).css('background-color')=='rgba(0, 0, 0, 0)' && i<colors.length)
      $(this).css('background-color',colors[i++]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide_button_wrapper left first" ><p class="text">Text1</p></div>
<div class="slide_button_wrapper right first" ><p class="text">Text2</p></div>
<div class="slide_button_wrapper left second"><p class="text">Text3</p></div>
<div class="slide_button_wrapper right second" ><p class="text">Text4</p></div>

<div class="slide_button_wrapper left third" ><p class="text">Text5</p></div>