时间戳

首页 > 解决方案 > 通过JS分析数组来改变css类

javascript - 通过JS分析数组来改变css类

问题描述

首先在这里尝试。我是 Web 开发的新手，大部分时间都忙于基于 CSS、html 的前端工作，这是游戏中典型的标记/样式部分。我只是设计了一些首字下沉，这将根据跨度中的内容改变它们的行为。就“12”比“1”甚至“#12”占用更多空间而言，我有多个改变样式的css类。目标是编写一些 JS 来分析我在跨度中放置了多少和哪些字符，因此将一个类附加到它。容易吧？

好吧，我对 JS 的了解不多，主要是与基本的东西相处，所以需要一些建议来更改或调整代码以变得更好。

这就是我到目前为止的情况：

function capsChange(){

var spanLength = document.getElementsByClassName('.dropcap.circle').value.length
var spanContent = document.getElementsByClassName ('.dropcap.cirle')

if (spanLength = 2 && spanContent.includes('#')) { 

    spanContent.classList.add('oneplusdot');
}

else if (spanLength = 1) { 

    spanContent.classList.add('onealone'); 
}

else if (spanLength = 3 && spanContent.includes('.') ) { 

    spanContent.classList.add('twoplusdot');
}

else if(spanLength = 3 && spanContent.includes('#') ) { 

    spanContent.classList.add('twoplusone');
}

else if(spanLength = 2 && spanContent.includes("#" || '.') == false ) { 

    spanContent.classList.add('twoalone');
}
}

提前致谢，请原谅我（很可能）写得不好。

标签： javascripthtmlcssclasscss-selectors

解决方案

尽管您没有发布任何特定于 JS 的问题。建议检查短路以获得更好的代码可读性并避免嵌套条件语句。

capsChange() {
    var spanLength = document.getElementsByClassName('.dropcap.circle').value.length
    var spanContent = document.getElementsByClassName('.dropcap.cirle')
    switch (spanLength) {
        case 1:
            spanContent.classList.add('onealone');
            break;

        case 2:
            if (spanContent.includes('#')) {
                spanContent.classList.add('oneplusdot');
                break;
            }
            if (!spanContent.includes('.')) {
                spanContent.classList.add('twoalone');
            }
            break;
        
        case 3:
            if (spanContent.includes('#')) {
                spanContent.classList.add('twoplusone');
                break;
            }
            if (spanContent.includes('.')) {
                spanContent.classList.add('twoplusdot');
            }
            break;
    }

推荐阅读