时间戳

首页 > 解决方案 > 试图将重复的代码放在一个函数中，我想我在某个地方弄乱了字符串

javascript - 试图将重复的代码放在一个函数中，我想我在某个地方弄乱了字符串

问题描述

我建立了一个小小的呼吸应用程序http://cheel.me/但我知道 javascript 特别像意大利面条，而不是我应该如何做。

我想将所有重复的东西放入一个函数中，但我认为我插入动画持续时间的方式是错误的，但似乎无法解决。

这是原始的 Javascript 想要制作成更好的功能。

var breatheAnimation = document.getElementById("circleanim");

$('#5seconds').click(function () {
        breatheAnimation.style.animation = "breathe 10s infinite ease both";
        document.getElementById("in").style.animation = "in 10s infinite ease";
        document.getElementById("out").style.animation = "out 10s infinite ease";
        this.classList.add("active");
        document.getElementById("6seconds").classList.remove("active");
        document.getElementById("7seconds").classList.remove("active");
        document.getElementById("8seconds").classList.remove("active");
});

$('#6seconds').click(function () {
        breatheAnimation.style.animation = "breathe 12s infinite ease both";
        document.getElementById("in").style.animation = "in 12s infinite ease";
        document.getElementById("out").style.animation = "out 12s infinite ease";
        this.classList.add("active");
        document.getElementById("5seconds").classList.remove("active");
        document.getElementById("7seconds").classList.remove("active");
        document.getElementById("8seconds").classList.remove("active");
});

$('#7seconds').click(function () {
        breatheAnimation.style.animation = "breathe 14s infinite ease both";
        document.getElementById("in").style.animation = "in 14s infinite ease";
        document.getElementById("out").style.animation = "out 14s infinite ease";
        this.classList.add("active");
        document.getElementById("5seconds").classList.remove("active");
        document.getElementById("6seconds").classList.remove("active");
        document.getElementById("8seconds").classList.remove("active");
});

$('#8seconds').click(function () {
        document.getElementById("circleanim").style.animation = "breathe 16s infinite ease both";
        document.getElementById("in").style.animation = "in 16s infinite ease";
        document.getElementById("out").style.animation = "out 16s infinite ease";
        this.classList.add("active");
        document.getElementById("5seconds").classList.remove("active");
        document.getElementById("7seconds").classList.remove("active");
        document.getElementById("6seconds").classList.remove("active");
});

这就是我要去的地方，但我很确定我添加持续时间的方式是错误的，但我正在努力寻找正确的答案

var breatheAnimation = document.getElementById("circleanim");

function changeDuration(duration) {
    breatheAnimation.style.animation = "breathe  " . duration . "s infinite ease both";
    document.getElementById("in").style.animation = "in " . duration . "s infinite ease";
    document.getElementById("out").style.animation = "out " . duration . "s infinite ease";
    this.classList.add("active");
};

$('#5seconds').click.changeDuration(10);
$('#6seconds').click.changeDuration(12);
$('#7seconds').click.changeDuration(14);
$('#8seconds').click.changeDuration(16);

我不断在控制台中收到“意外字符串”错误。我知道我没有添加循环或 if/else 语句来删除活动类。但我会做到的！

标签： javascriptcssfunction

解决方案

使用 JavaScript 连接运算符+代替.（例如 PHP 的）

breatheAnimation.style.animation = "breathe  " + duration + "s infinite ease both";

推荐阅读