0

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

有代码：

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

 <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>
4

3 回答 3

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

于 2012-11-11T22:01:26.073 回答
0

我建议使用 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");
}
于 2012-11-11T21:42:57.740 回答
-1

使用 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

于 2012-11-11T21:59:48.460 回答