Question

我目前正在学习HTML。我必须做一个练习，其中文本必须从红色到绿色来回变换。我的代码如下，但似乎不起作用。任何帮助将不胜感激。

.red { color : #FF0000 }
.green {color : #00FF00; }
<script type='text/javascript'>
function f(){
  value=1
  if (value == 1) {
    document.getElementById("txt").className = "green";
    value = 0 
  }
  else if (value == 0) {
    document.getElementById("txt").className="red"  
    value = 1
  }
}
</script>
<p id='i1'>This is <em> special </em> <span id="txt" class='red'>text</span>.</p>
<p id="click"  onclick='f();'>Click to change the colour of text</p>

Answer 1

不要设置任何值。直接检查txt课程。

function f(){
  var txt = document.getElementById("txt");

  if (txt.className == 'green') {
   txt.className = "red";
  }
  else {
    txt.className = "green";
  }
}

https://jsfiddle.net/fNPvf/33526/

Answer 2

这是因为您的value始终会重新设置为1。

我建议使用data attribute来设置元素的当前状态。

＆＃13;

function f() {
  var el = document.getElementById('txt');
  
  if (el.dataset.val == 1) {
    el.className = "green";
    el.dataset.val = 0;
  } else if (el.dataset.val == 0) {
    el.className = "red"
    el.dataset.val = 1;
  }
}

＆＃13;

.red {
  color: #FF0000
}
.green {
  color: #00FF00;
}

＆＃13;

<p id='i1'>This is <em> special </em>  <span id="txt" class='red' data-val="1">text</span>.</p>
<p id="click" onclick='f();'>Click to change the colour of text</p>

＆＃13;

<强>的jQuery

＆＃13;

function f() {
  $('#txt').toggleClass('red green');
}

＆＃13;

.red {
  color: #ff0000;
}
.green {
  color: #00ff00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='i1'>This is <em> special </em>  <span id="txt" class='red'>text</span>.</p>
<p id="click" onclick='f();'>Click to change the colour of text</p>

＆＃13;

Answer 3

更改

使用addEventListener()代替属性事件处理程序。现在演示文稿与代码完全分开。
在方法classList()上铰接颜色状态，因为所有内容都以类为中心。更多样式可以轻松扩展功能的功能。
通过在父元素（#content）上添加事件处理来使用事件委托，然后单独列出事件触发器的来源（e.target是单击的元素）事件委派将节省我们的吨数时间，工作和内存，而不是在每个元素上写一个事件处理程序，你只写一个。

＆＃13;

var content = document.getElementById('content');

content.addEventListener('click', f);

function f(e) {
  var tgt = e.target;
  if (tgt.classList.contains('red')) {
    tgt.classList.remove('red');
    tgt.classList.add('green');
  } else {
    tgt.classList.add('red');
    tgt.classList.remove('green');
  }
}

＆＃13;

p {
  cursor: pointer;
}
.red {
  color: #FF0000
}
.green {
  color: #00FF00;
}

＆＃13;

<section id='content'>
  <p class='red'>This is <em> special </em> text.</p>
  <p class='green'>Click to <b>change</b> the colour of text</p>
</section>

＆＃13;

Answer 4

您的代码的问题在于您以错误的顺序运行代码，您的基本算法是：

onclick - ＆gt;
f（）start - ＆gt;
设定值为1 - >
检查值是否为1
（真）{将颜色设置为绿色}
（假）{将颜色设置为红色}

然后，如果用户再次点击，相同的算法将再次运行。

这是你应该做的：

    var value = true;
    function f() {
        var txt = document.getElementById("txt");
        if(value) {
            document.getElementById("txt").className = "green";
            value = false;
        } else {
            document.getElementById("txt").className = "red";
          value = true;
        }
    }

.red { color : #FF0000 }
.green {color : #00FF00; }

<p id='i1'>This is <em> special </em> <span id="txt" class='red'>text</span>.</p>
<p id="click" onclick="f()">Click to change the colour of text</p>

这样，您将value设置为true（1基本上为true，0为false），然后等待用户单击，将文本设置为绿色，将value更改为false，然后，如果用户再次点击，您将不会重置value，相反，它仍将为false，文本将设置为红色并将value设置为true。

单击HTML更改文本颜色

4 个答案:

更改