Question

我试图在选择的表单选择菜单时让div切换样式属性。任何帮助都会很棒！

有代码：

select标签（我有脚本函数的值）：

 <div style="float: right; margin-right: 5%; width: auto;">
        <select style="border: 3px intset; border-radius: 5px; border-color: #17FFFF;" onchange="showstuff(this.value);">
            <optgroup label="Lisboa">
                <option value="Picoas">Picoas</option>
                <option value="Benfica">Benfica</option>
            </optgroup>
            <optgroup label="Porto">
                <option value="Felgueiras">Felgueiras</option>
                <option value="Maia">Maia</option>
            </optgroup>
        </select>
    </div>

具有班级名称的div：

<div style="width: 90%; height: 50%; background-color: #09C; overflow: scroll; overflow-x: hidden; margin-bottom: 15%; margin-left: 5%; margin-right: 5%; text-align: left; color: #000; font-size: 60%;">
    <div class="Picoas" style="height: 30%; width: 100%; background-color: #CCEAFF; display:none;">
        Timberland Picoas<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Felgueiras" style="height: 30%; width: 100%; background-color: #CCEAFF;
        margin-top: 2%;display:none;">
        Timberland Felgueiras<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Picoas" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Picoas<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Felgueiras" style="height: 30%; width: 100%; background-color: #CCEAFF;
        margin-top: 2%;display:none;">
        Timberland Felgueiras<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Benfica" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Benfica<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Maia" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Maia<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Benfica" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Benfica<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Maia" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Picoas<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
</div>

脚本和类定义：

 <script type="text/javascript">
    function showstuff(element) {
        var elementsPicoas = document.getElementsByClassName("Picoas");
        elementsPicoas.style.display = element == "Picoas" ? "block" : "none";
         var elementsBenfica = document.getElementsByClassName("Benfica");
        elementsBenfica.style.display = element == "Benfica" ? "block" : "none";
         var elementsFelgueiras = document.getElementsByClassName("Felgueiras");
        elementsFelgueiras.style.display = element == "Felgueiras" ? "block" : "none";
         var elementsMaia = document.getElementsByClassName("Maia");
        elementsMaia.style.display = element == "Maia" ? "block" : "none";
    } 
</script>
     <style>
  .Picoas{}
  .Felgueiras{}
  .Benfica{}
  .Maia{} 
  </style>

Answer 1

以下是没有jQuery的方法！

function showstuff(selectedElementClass) {

    var elementClasses = [
        "Picoas",
        "Benfica",
        "Felgueiras",
        "Maia"
    ];

    for (var i = 0; i < elementClasses.length; i++) {
        var elements = document.getElementsByClassName(elementClasses[i]);

        for (var j = 0; j < elements.length; j++) {
            var element = elements[j];
            element.style.display = (element.className === selectedElementClass)? "block" : "none";
        }
    }
}

您可以在此处看到它：https://tinker.io/38459/3

Answer 2

我建议使用jQuery，它可以让你做像

这样的事情

$(".Picoas, .Benfica, .Felgueiras, .Maia").hide(); //hide them all
$("." + element).show(); //display only the selected one

<强>更新

抱歉，这太快了。真正的问题是，getElementsByClassName函数返回多个元素，因为您在代码中检查了所有要检查的类2次。

你可以做的是 - 如果你不想使用jQuery - 就像这样：

function display(className, mode)
{
    var elms = document.getElementsByClassName(className);

    for (var i = 0; i < elms.length; i++)
    {
        elms[i].style.display = mode;
    }

}

function showstuff(element) 
{
    //hide 'em all
    var allElements = ["Picoas", "Benfica", "Felgueiras", "Maia"];

    for (var i = 0; i < allElements.length; i++)
    {
        display(allElements[i], "none");
    }

    //show the one selected
    display(element, "block");
}

Answer 3

使用jQuery执行此操作的更有效方法：

<script type="text/javascript">
$(document).ready(function(){
   $("#changeme").change(function(){
     $(".dynamic").css("display", "none");
     $("."+this.value).css("display", "block");
   });
});
</script>

<style>
.dynamic
   {
       height: 30%; 
       width: 100%; 
       background-color: #CCEAFF; 
       margin-top: 2%;
       display:none;
   }
.Picoas{}
.Felgueiras{}
.Benfica{}
.Maia{} 
</style>

<div class="Picoas dynamic">
    Timberland Picoas<br />
    Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
    1500-392 Lisboa
</div>
<div class="Felgueiras dynamic">
    Timberland Felgueiras<br />
    Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
    1500-392 Lisboa
</div>
(etc.)

http://jsbin.com/welcome/47377/edit

使用getelementsbyclassname基于select选项显示/隐藏div

3 个答案: