單擊同一元素時如何觸發不同的功能？

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

您應該為divs綁定click事件處理程序，並使用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

您可以嘗試如下操作：

 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 3

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

UPDATE =您需要更改id的類，或僅添加id="text"來調用對象

Answer 4

如果您是說每個元素都有自己的顏色，那么我建議向這些元素添加data-attribute ，比如說data-color ，然后根據其值更改顏色。

例如：

<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 。 如果不是，則不執行任何操作，否則檢查單擊的元素是否為“ Text1”，然后將其顏色更改為“紅色”，否則將顏色更改為“藍色”。

您的描述有點含糊，所以我唯一想到的就是這個。 您可以立即將此代碼更改為您的要求。