當我點擊相同的元素時如何觸發不同的功能？

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

你應該綁定click事件處理程序爲您divs和使用css()方法，以get/set的顏色你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>

Answer 2

<p id="text" onclick="myFunction()">Text.</p> 
<script> 
function myFunction() { 
    document.getElementById("demo").style.color = "red"; 
} 
</script> 

UPDATE =您需要更改類ID，或只加id="text"調用對象

Answer 3

你可以嘗試這樣的事情：

var colors = ['red', 'blue']; 
 
colors = colors.reverse(); 
 

 
var texts = document.querySelectorAll('.text'); 
 
texts.forEach(function(element) { 
 
    element.addEventListener('click', function() { 
 
    if (colors.length > 0) { 
 
     var color = colors.pop(); 
 
     element.style.color = color; 
 
    } 
 
    }); 
 
});

<span class="text">TEXT</span> 
 
<span class="text">TEXT</span> 
 
<span class="text">TEXT</span> 
 
<span class="text">TEXT</span> 
 
<span class="text">TEXT</span> 
 
<span class="text">TEXT</span> 
 
<span class="text">TEXT</span>

Answer 4

如果你的意思是，每個元素都有自己的顏色，那麼我建議增加一個data-attribute到元素，比如說data-color和chan根據其價值來確定顏色。

例如：

<div class="slide_button_wrapper left first" ><p class="text" data-color="red">Text1</p></div> 
<div class="slide_button_wrapper right first" ><p class="text" data-color="blue">Text2</p></div> 

純JavaScript：

var elements = document.querySelectorAll('.text'); 
for(var z = 0; z < elements.length; z++) { 
    var elem = elements[z]; 
    elem.onclick = function() { 
     var color = this.getAttribute("data-color"); 
     this.style.color = color; 
     return false; 
    }; 
} 

Answer 5

您</body>標籤結束前添加該代碼。

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var counter = 0; 
     $('.text').on('click', function() { 
      counter++; 
      if(counter < 3) 
      { 
       if($(this).text() == 'Text1') 
        $(this).css("color", "red"); 
       else 
        $(this).css("color", "blue"); 
      } 
     });  
    }); 
</script> 

代碼的解釋如下：

第1步：我們首先導入jQuery庫，因爲它給了書面的JavaScript代碼更大的靈活性。

步驟2：聲明一個全局變量counter並將其初始化爲0。

第3步：將函數綁定到類text的元素的click事件。步驟4：檢查是否counter < 3。如果不是，則不做任何事情，否則檢查單擊的元素是否爲'文本1'，然後將其顏色更改爲'紅色'，否則將顏色更改爲'藍色'。

你的描述有點含糊，所以只有我想出來的是這個。您現在可以將此代碼更改爲您的要求。