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的{{1}}事件处理程序并使用divs方法，以css() get/set的颜色。

＆＃13;

div

＆＃13;

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++]);
});

＆＃13;

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>

Pure 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”，然后将其颜色更改为“红色”，否则将颜色更改为“蓝色”。

你的描述有点模糊，所以我唯一想到的就是这个。您现在可以将此代码更改为您的要求。

单击同一元素时如何触发不同的功能？

5 个答案: