通过JS分析数组来改变css类答案

【问题标题】：changing css classes by analyzing the array by JS通过JS分析数组来改变css类
【发布时间】：2021-01-18 02:16:47
【问题描述】：

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

嗯，我对 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');
}
}

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

【问题讨论】：

“这就是我到目前为止的表现” - 好的，但有什么问题？ -> How do I ask a good question?
= 是赋值运算符，但您需要== 或=== 进行比较
.includes("#" || '.') - 您绝对应该再看看不同的运算符是如何工作的，以及如何正确使用它们。

标签： javascript html css class css-selectors

【解决方案1】：

虽然您没有发布任何特定于 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;
    }

【讨论】：

谢谢你们的建议。我并不是真正喜欢所有的运算符，而是通过网络研究找到了代码，这就是为什么我希望你们看看它并直接推送好的建议（关于工作运算符，或语法或其他）对我来说。谢谢！

【解决方案2】：

只是为了减少代码你可以看到这个..

function capsChange(){

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

if (spanLength === 1) { 
    spanContent.classList.add('onealone'); 
}
else if(spanLength === 2){
    spanContent.classList.add(!spanContent.includes("#" || '.') && 'twoalone');
    spanContent.classList.add(spanContent.includes('#') && 'oneplusdot');
}
else if(spanLength === 3){
    spanContent.classList.add(spanContent.includes('.') && 'twoplusdot');
    spanContent.classList.add(spanContent.includes('#') && 'twoplusone');
}

}

【讨论】：