重复javascript函数onclick

Question

Im a total noob and need some help on a function which I would think for most of you would be quite simple. 我是一个总菜鸟，需要一些功能的帮助，我认为对你们大多数人来说都很简单。 I am trying to do this with pure Javascript and not JQuery. 我试图用纯Javascript而不是JQuery来做这件事。 I have been trying for hours and I cant get it. 我已经尝试了几个小时，但我无法得到它。

What I am trying to achieve is to have a function repeat every time I click on a link. 我想要实现的是每次点击链接时重复一个函数。

To be more specific I currently have text that fades in when clicking a link and I would like it to always perform the fade in when I click on it (as if you were to refresh the page). 更具体地说，我目前有单击链接时淡入的文本，我希望它在我点击它时总是执行淡入淡出（就像你要刷新页面一样）。

Basically: Click link (x) -- Text Fades in -- click link (x) -- same text disappears and then fades in from beginning of transition/animation (no fade out) -- repeat 基本上：单击链接（x） - 文本淡入 - 单击链接（x） - 相同的文本消失，然后从过渡/动画开始淡入（不淡出） - 重复

I have come across something very similar on W3 schools which shows a function starting from the beginning every time you click the button: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_progressbar 我在W3学校遇到过类似的东西，每次点击按钮时都会从头开始显示一个功能： https ： //www.w3schools.com/jsref/tryit.asp？filename = tryjsref_win_setinterval_progressbar

I thought that modifying this was the answer but because I am trying to change the opacity, I have seen that I have to add a parseFloat to the function because it is a string but I am having no success. 我认为修改这个是答案，但因为我试图改变不透明度，我已经看到我必须在函数中添加一个parseFloat，因为它是一个字符串，但我没有成功。 The example is: 例子是：

else { i.style.opacity = parseFloat(i.style.opacity) + .1; else {i.style.opacity = parseFloat（i.style.opacity）+ .1; } }

To throw another spanner in the works, I am using the opacity value from the color:rgba(0,0,0,0) to change the opacity. 为了在工作中抛出另一个扳手，我使用颜色的不透明度值：rgba（0,0,0,0）来改变不透明度。 I thought this may be easier to find since the above example would (in my mind) bypass the parseFloat thing as you would be using i.style.color but I could not find anything. 我认为这可能更容易找到，因为上面的例子（在我看来）绕过parseFloat的东西，因为你将使用i.style.color，但我找不到任何东西。

Below is my code based on a variation of the W3 schools tutorial. 以下是基于W3学校教程变体的代码。 I'm pretty sure that clearInterval in JS has a big part to play in what I need. 我很确定JS中的clearInterval在我需要的东西中发挥了重要作用。 Very much appreciate any help for this and please let me know if you need more clarity :) 非常感谢任何帮助，请告诉我你是否需要更清晰:)

<!DOCTYPE html>
<html>

<style>

#about {
  color: rgba(10,10,10,0);
  transition: color 1s linear 1s;
}

#about:target {
  color: rgba(10,10,10,1);
  transition: color 1s linear 1s;
}    

</style>

<body>

<a href="#about" onclick="fadeIn()">About</a> 

<div id="div">

<p id='about'> Please help me figure this out. I really appreciate it</p>  

</div>

</body>

<script>
function fadeIn() {
var elem = document.getElementById("about");   
var begin = 0;
var id = setInterval(frame, 10);
function frame() {
  if (begin == 100) {
    clearInterval(id);
  } else {
    begin++; 
    elem.style.color = begin + '1'; 
  }
 }
}
</script>

</html>

Answer 1

There is a solution, which I am not going to present you, because the JS "hack" will take longer, compared to the CSS-trick: (looking for appropriate reference) 有一个解决方案，我不会向你介绍，因为与“CSS技巧”相比，JS“hack”需要更长的时间:(寻找合适的参考）

You wrap your stuff, which you want to fade in and out into a container (just making sure) and add a checkbox above it: 你把你想要淡入和淡出的东西包装成一个容器（只是确定）并在它上面添加一个复选框：

<label for="about">About</label>
<intput type="checkbox" name="about" id="about">
<div id="about_container"> bla-bla-bla</div>

then you style your stuff: Hide the checkbox (the label is clickable) make two configs for your #about_container first: in the off mode, second in the on mode (you can comment them out for debugging purpose) 然后你调整你的东西：隐藏复选框（标签是可点击的）首先为你的#about_container做两个配置：在关闭模式，第二个在开启模式（你可以将它们注释出来用于调试目的）

#about + #about_container

then you add the input id with pseudo-selector before the second: 然后在第二个之前用伪选择器添加输入id：

#about:checked + #about_container

on your on mode, and leave the other one, like it is. 在你的开启模式，离开另一个，就像它。

MUCH BETTER AND FASTER SOLUTION! 更好更快的解决方案！

You should also change your question into something like: How do I make html element appear and disappear on mouse-click or other user-interaction. 您还应该将问题更改为：如何使html元素在鼠标单击或其他用户交互中显示和消失。

Answer 2

You can use transitions and then set opacity 0.5 and after some ms change it in 1 to let it fade on click and return in the older look 您可以使用过渡然后设置不透明度0.5，并在一些ms之后将其更改为1以使其在点击时淡入并返回较旧的外观

Edit: 编辑：

Just put fadeIn() inside another function, and before the fadeIn() executon set the opacity to 0 只需将fadeIn（）放在另一个函数中，然后在fadeIn（）executon中将不透明度设置为0

Edit: 编辑：

JS JS

doIt = function() {
document.getElementById("about").style.color = begin + '0';
fadeIn();
}

HTML HTML

<a href="#about" onclick="doIt()">About</a>

重复javascript函数onclick

问题描述

2 个解决方案

解决方案1
0 2017-03-12 18:00:11

解决方案2
0 2017-03-12 18:20:02

重复javascript函数onclick

问题描述

2 个解决方案

解决方案1 0 2017-03-12 18:00:11

解决方案2 0 2017-03-12 18:20:02

解决方案1
0 2017-03-12 18:00:11

解决方案2
0 2017-03-12 18:20:02