Javascript 如何在选择选项时动态添加类

我想为此选定的类动态添加类

HTML:

<select name="number" id="paragraphSpaceOPtion">
    <option class="option-1" value="00">00</option>
    <option class="option-2" value="05">05</option>
    <option class="option-3" value="07">07</option>
    <option class="option-4" value="10">10</option>
    <option class="option-5" value="15">15</option>
    <option class="option-6" value="20">20</option>
</select>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, in!</p>
</div>

$(document).ready(function(){

    var e = document.getElementById("paragraphSpaceOPtion");
    var strUser = e.options[e.selectedIndex].value;
    //console.log("option number " + strUser);

    //var masud = typeof(strUser);
    //console.log(masud);
    if(strUser == "00"){
        $(".content").addClass("option-no-00");
    }
    if(strUser == "05"){
        $(".content").addClass("option-no-05");
    }
    if(strUser == "07"){
        $(".content").addClass("option-no-07");
    }
    if(strUser == "10"){
        $(".content").addClass("option-no-10");
    }
    if(strUser == "15"){
        $(".content").addClass("option-no-15");
    }
    if(strUser == "20"){
        $(".content").addClass("option-no-20");
    }
})

---

我不想在选择选项时动态添加类名。

您需要观察选择的更改，并将代码放入其中：

  $('#paragraphSpaceOPtion').change(function(){
       //your code here
  });

下面是一个完整的示例：

$（文档）.ready（函数（）{
$（“#paragraphSpaceOPtion”）.change（函数（）{
var e=document.getElementById（“paragraphSpaceOPtion”）；
var strUser=e.options[e.selectedIndex].value；
//控制台日志（“选项编号”+strUser）；
//var masud=类型（strUser）；
//控制台日志（masud）；
$（“.content”）.attr（'class'，'content'）；
如果（strUser==“00”）{
$（“.content”）.addClass（“选项编号00”）；
}
如果（strUser==“05”）{
$（“.content”）.addClass（“选项-no-05”）；
}
如果（strUser==“07”）{
$（“.content”）.addClass（“选项编号-07”）；
}
如果（strUser==“10”）{
$（“.content”）.addClass（“选项编号10”）；
}
如果（strUser==“15”）{
$（“.content”）.addClass（“选项编号15”）；
}
如果（strUser==“20”）{
$（“.content”）.addClass（“选项编号20”）；
}
})
})

00
05
07
10
15
20
下面是我想添加的内容类：
Lorem ipsum dolor sit amet，奉献精英。泰姆布里布斯，进来
 

$（'select'）。关于（'change'，函数（e）{
var optionSelected=$（“选项：已选择”，此选项）；
var strUser=该值；
$（“[class*='option-no']”）。removeClass（函数（索引，类名）{
return（className.match（/option-no.*/g）| |[]）。join（“”）；
});
如果（strUser==“00”）{
选项Selected.addClass（“选项编号00”）；
}
如果（strUser==“05”）{
选项选择。添加类别（“选项编号05”）；
}
如果（strUser==“07”）{
选择的选项。添加类别（“选项编号-07”）；
}
如果（strUser==“10”）{
选项选择。添加类别（“选项编号10”）；
}
如果（strUser==“15”）{
选项选择。添加类别（“选项编号15”）；
}
如果（strUser==“20”）{
选项选择。添加类别（“选项编号20”）；
}
});

00
05
07
10
15
20

$（“.content”）.removeClass（）.addClass（“内容选项号-”+$（“#段落空间选项”）.find（'option:selected'）.val（））；
$（“#paragraphSpaceOPtion”）。关于（“更改”，函数（）{
var val=$（this.find（'option:selected'）.val（）；
$（“.content”）.removeClass（）.addClass（“内容选项号-”+val）；
});
.option-no-00{颜色：粉色}
.option-no-05{颜色：蓝色}
.option-no-07{颜色：绿色}
.option-no-10{颜色：红色}
.option-no-15{颜色：黄色}
.option-no-20{颜色：灰色}

00
05
07
10
15
20
Lorem ipsum dolor sit amet，奉献精英。泰姆布里布斯，进来

由于您希望在选项更改时更改类，因此应收听您的
select
的
change
事件，如下图所示

$('#paragraphSpaceOPtion').on('change', function() {
    var strUser = $(this).val(); //Get the choosen value
});


$（文档）.ready（函数（）{
$（'#paragraphSpaceOPtion'）。on（'change'，function（）{
var strUser=$（this.val（）；
$（“.content”）.attr（'class'，'content'）；
如果（strUser==“00”）{
$（“.content”）.addClass（“选项编号00”）；
}
如果（strUser==“05”）{
$（“.content”）.addClass（“选项-no-05”）；
}
如果（strUser==“07”）{
$（“.content”）.addClass（“选项编号-07”）；
}
如果（strUser==“10”）{
$（“.content”）.addClass（“选项编号10”）；
}
如果（strUser==“15”）{
$（“.content”）.addClass（“选项编号15”）；
}
如果（strUser==“20”）{
$（“.content”）.addClass（“选项编号20”）；
}
});
});
。选项-no-00{
背景颜色：绿色；
}
.方案编号05{
背景色：红色；
}
.方案-no-07{
背景颜色：黄色；
}
.第10项选择{
背景颜色：灰色；
}
.第15项选择{
背景颜色：蓝色；
}

00
05
07
10
15
20
Lorem ipsum dolor sit amet，奉献精英。泰姆布里布斯，进来
 
您可以利用
change
事件来完成此操作


$（'select#paragraphSpaceOPtion'）。更改（函数（）{
var className=“内容选项号-”+$（this.val（）；
$（'.content'）.removeClass（）.addClass（className）；//删除现有类并添加所需类。
});
。选项-no-00{
背景：99万；
}
.方案编号05{
背景#999900；
}
.方案-no-07{
背景#990099；
}
.第10项选择{
背景：#009900；
}
.方案编号05{
背景#990033；
}
.第20项选择{
背景：#338822；
}

00
05
07
10
15
20
Lorem ipsum dolor sit amet，奉献精英。泰姆布里布斯，进来

这是您的另一个解决方案


var-prevVal；
$（“#paragraphSpaceOPtion”）。关于（“更改”，函数（）{
var val=$（this.find（'option:selected'）.val（）；
$（“.content”）.removeClass（`content-${prevVal}`）.addClass（`content-${val}`）；
prevVal=val；
});
.content-00{颜色：粉色}
.content-05{颜色：蓝色}
.content-07{颜色：绿色}
.content-10{颜色：红色}
.content-15{颜色：黄色}
.content-20{颜色：灰色}

00
05
07
10
15
20
Lorem ipsum dolor sit amet，奉献精英。泰姆布里布斯，进来

您可以试试这个

    $('#paragraphSpaceOPtion').on('change',function(){
        var value = $(this).val();
        var content = $('.content') 
        content.removeClass().addClass('content option-no-'+value)
    })

纯
JS
解决方案怎么样？以下是一个针对
JS
爱好者的无依赖性解决方案：


var选择器=document.querySelector（“#paragraphSpaceOPtion”）；
var oldClass=“”；//为先前选择的类定义默认为空的变量
//
selector.addEventListener（“更改”，选择）；
函数选择（）{
var content=document.querySelector（“.content”）；
var newClass=“选项编号-”+this.value；
if（oldClass）{//检查oldClass是否存在
content.classList.remove（oldClass）；//删除以前选择的旧类（如果有）
}
content.classList.add（newClass）；//添加所选类
oldClass=newClass；//对于下一次选择更改，newClass将是旧类
}
。选项-no-00{
颜色：#990