Javascript 选择性地添加和删除相同CSS属性的值

我正在使用jquery创建一个开放式特性测试仪，并希望让用户能够看到同时应用多个开放式特性

第一个下拉列表将属性设置为

字体功能设置：“frac”1

，第二个下拉菜单将属性设置为

字体功能设置：“smcp”1

当前，如果两个下拉列表都处于活动状态，则其中一个将覆盖另一个下拉列表的指令。我需要的是，如果两者同时处于活动状态，则属性设置为
字体功能设置：“frac”1，“smcp”1
因此，如果仅停用其中一个，则仅从属性中删除相应的值

注意：我知道当我从Google字体网站链接字体时，OpenType功能不起作用，所以我一直在测试它的安装情况

提前谢谢


.font测试仪{
颜色：#000；
线高：正常；
宽度：100%；
单词包装：打断单词；
填充顶部：30px；
}
@导入url（'https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap'）；
违约
分数
违约
小型股
abc 123
$（“#测试仪图形”）.更改（函数（）{
$（'.font tester'）.css（“字体功能设置”，$（this.val（））；
});
$（“#测试仪smcp”）.更改（函数（）{
$（'.font tester'）.css（“字体功能设置”，$（this.val（））；
});
您需要做的基本上是在更新值时将这些值连接成逗号分隔的字符串，而不仅仅是输入值。如果愿意，您可以编写自己的函数来执行此操作。它必须包含一个值还是多个值的逻辑，以确保不会无故以逗号结尾。但是，有一种更简单的方法：如果我们将值存储在数组中，我们可以使用
array.join（）
，它将自动为我们处理该逻辑

Array.join（）。因此，我们可以这样做：

['one', 'two', 'three'].join(', '); // => 'one, two, three'

请注意，结尾没有额外的逗号和空格

现在我们知道了如何得到最终结果，我们只需要努力得到值。您需要根据与下拉列表的交互方式向数组中添加元素或删除元素。因为现在每个下拉列表中只有两个项目，所以逻辑可能非常简单。如果要在任何下拉列表中包含多个项目，总体方法是相同的，但必须调整下面代码段中的If…else部分

请记住，如果要从数组中删除项，则需要知道要删除什么。但这是旧的价值观。如果在
.change（）
函数中运行
$（myInput）.val（）
，将获得当前值。因此，您需要单独跟踪旧值

设置好新数组后，只需应用
array.join（）
magic，然后就可以在jQuery
.css（）
函数中使用字符串

如果您尽可能减少重复的逻辑，并且只有一个单一的函数，每个输入可以调用，那么维护这一点就会容易得多。所以我在下面为你做了这些。如果需要，您可以在
.each（）
函数前面链接更多的
.add（）
来为其添加更多输入


让oldValues=['none'，'none']；//无论每个选择的默认值是什么
让currentValue=[]；
const getNewValue=input=>{
常量val=$（输入）.val（）；
const index=input.index（）；
const oldValue=oldValue[索引]；
如果（val！=“无”）{
当前值推送（val）；
}否则{
const indexOfValue=currentValue.indexOf（oldValue）；
currentValue.splice（indexOfValue，1）；
}
oldValues[index]=val；
const newCssValue=currentValue.join（'，'）；
console.clear（）；
log（`new值为“${newCssValue}”`）；
返回新的CSS值；
};
$（函数（）{
常量$fontTester=$（'.font tester'）；
$（“#测试仪图形”）。添加（“#测试仪smcp”）。每个（函数（）{
const$this=$（this）；
$this.change（函数（）{
const newCssValue=getNewValue（$this）；
$fontTester.css（'font-feature-settings'，newCssValue）；
});
});
});
.font测试仪{
颜色：#000；
线高：正常；
宽度：100%；
单词包装：打断单词；
填充顶部：30px；
}

违约
分数
违约
小型股
abc 123
解决任务的方法有很多。另外，这里有一个替代解决方案，它的代码越来越简单

它只使用一个函数将更改事件添加到两个选择中。在更改时，它从两个选择中读取实际值，并基于两个选择的实际值构建一个简单的css字符串

$('#tester-figures').add('#tester-smcp').each( function(){
    const $this = $(this);
    $this.change(function(){

        let actualVals = {};
        actualVals.TesterFigures = $('#tester-figures').val();
        actualVals.TesterSmcp = $('#tester-smcp').val();                    
        
        let myVal = '';

        if('none' == actualVals.TesterFigures){
            myVal = 'none' == actualVals.TesterSmcp  ?  '' : actualVals.TesterSmcp;
        }else {
            myVal = 'none' == actualVals.TesterSmcp  ?  actualVals.TesterFigures : actualVals.TesterFigures + ', ' + actualVals.TesterSmcp;
        }

        $('.font-tester').css("font-feature-settings", myVal);

    });

});


注意：我还没有使用css属性
字体功能设置。所以我对这个特殊的项目没有任何经验。我注意到的是，选择中的字符串（即
'frac'1
）发生了变化。将css添加到html元素时，内部引号和数字将丢失。但没有它们，这种风格仍然有效。如果只在选择中使用
frac
和
smcp
，您可能希望检查它是否有效。在实际FF中，它起作用；-）