使用javascript淡入和淡出

我有一个选择器，可以让我选择三种类型的笔记本电脑。然而，当选择一个品牌的笔记本电脑时，该品牌的三种类型必须显示为单选按钮。我试图让JavaScript淡入/淡出。所以，如果我选择东芝，东芝的类型淡入，并且如果我选择另一个品牌，当前品牌显示淡出，另一个淡入。我尝试了一个js淡入/淡出功能，但我不知道如何改变它淡入/淡出几个元素。请帮忙吗？使用javascript淡入和淡出

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<link rel="stylesheet" type="text/css" href="custom.css"> 

</HEAD> 

<body> 
    <div id="laptop"> 
     <form> 
      <select> 
       <option id="handle" value="toshibalap" selected>toshiba</option> 
       <option id="handle" value="acerlap">acer</option> 
       <option id="handle" value="hplap">hp</option> 
      </select> 
       <div id="slideSource"> 
        <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong> 
        <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong> 
        <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong> 
       </div> 
       <div id="acer"> 
        <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong> 
        <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong> 
        <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong> 
       </div> 
       <div id="hp"> 
        <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong> 
        <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong> 
        <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong> 
       </div> 

     </form> 

    </div> 

<script> 
var slideSource = document.getElementById('slideSource'); 

document.getElementById('handle').onclick = function(){ 
    slideSource.className = slideSource.className ? '' : 'fade'; 
} 

</script> 
</body> 


</HTML>

CSS：

div#slideSource { 
opacity:1; 
transition: opacity 1s; 
} 

div#slideSource.fade { 
opacity:0; 
}

来源

2015-09-14 mikeb

您应该考虑为此找到一个Jquery函数。试图自己编写它会容易得多。 – durbnpoisn

如果你不想使用jQuery，您可以使用onChange事件指定一个回调函数每次值被改变。然后，element.style.display =“none”或element.style.display =“block”来显示或隐藏每个元素。

这是我的JsFiddle。为选择标签添加了一个ID。

HTML：

<div id="laptop"> 
<form> 
    <select id="select"> 
     <option id="handle" value="toshibalap" selected>toshiba</option> 
     <option id="volvocar" value="acerlap">acer</option> 
     <option id="saabcar" value="hplap">hp</option> 
    </select> 
    <div id="toshiba"> 
     <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong> 
     <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong> 
     <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong> 
    </div> 
    <div id="acer"> 
     <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong> 
     <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong> 
     <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong> 
    </div> 
    <div id="hp"> 
     <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong> 
     <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong> 
     <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong> 
    </div> 
</form>

JS：

var select = document.getElementById("select"); 
document.getElementById("toshiba").style.display = "block"; //initialized the selected option as "display = block"; 

select.addEventListener("change", function(event) { 
    if(event.target.value == "toshibalap") { 
     document.getElementById("toshiba").style.display = "block"; 
     document.getElementById("acer").style.display = "none"; 
     document.getElementById("hp").style.display = "none"; 
    } 
    else if(event.target.value == "acerlap") { 
     document.getElementById("toshiba").style.display = "none"; 
     document.getElementById("acer").style.display = "block"; 
     document.getElementById("hp").style.display = "none"; 
    } 
    else if(event.target.value == "hplap") { 
     document.getElementById("toshiba").style.display = "none"; 
     document.getElementById("acer").style.display = "none"; 
     document.getElementById("hp").style.display = "block"; 
    } 
});

CSS：

#toshiba { 
    display: none; 
} 

#acer { 
    display: none; 
} 

#hp { 
    display: none; 
}

来源

2015-09-14 20:28:46 adrield

还可以吗？ – mikeb

JsFiddle链接？只是检查，它仍然是！ – adrield

不，但它的解决方案不与我合作，不知道我去哪里错了。我可以为你提供一个jsfiddle吗？ – mikeb

我会第一个意见，即jQuery的会更容易达成一致。

HTML

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<link rel="stylesheet" type="text/css" href="custom.css"> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
</HEAD> 

<body> 
<div id="laptop"> 
    <form> 
     <select> 
      <option id="handle" value="toshibalap" selected>toshiba</option> 
      <option id="volvocar" value="acerlap">acer</option> 
      <option id="saabcar" value="hplap">hp</option> 
     </select> 
      <div id="toshibalap" class="laptops"> 
       <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong> 
       <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong> 
       <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong> 
      </div> 
      <div id="acerlap" class="laptops"> 
       <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong> 
       <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong> 
       <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong> 
      </div> 
      <div id="hplap" class="laptops"> 
       <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong> 
       <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong> 
       <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong> 
      </div> 

    </form> 

</div> 

</body> 


</HTML>

jQuery的

jQuery('select').change(function(){ 
    var val = jQuery(this).val(); 
    jQuery('.laptops').not('#'+val).fadeOut(); 
    jQuery('#'+val).fadeIn(); 
});

希望帮助！我修改了一下你的HTML。在膝上型容器中添加一个班级，并将膝上型容器div ID与选择框的值相匹配。

来源

2015-09-14 20:46:13 AndrewMac

如果你想保持淡入/淡出，你可以做这样的事情：

更新HTML：

<div id="laptop"> 
     <form> 
      <select id="sel"> 
       <option selected>Select</option> 
       <option id="handle" value="toshibalap">toshiba</option> 
       <option id="volvocar" value="acerlap">acer</option> 
       <option id="saabcar" value="hplap">hp</option> 
      </select> 
       <div id="slideSource"> 
        <div id="toshiba"> 
        <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong> 
        <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong> 
        <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong> 
         </div> 
       <div id="acer"> 
        <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong> 
        <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong> 
        <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong> 
       </div> 
       <div id="hp"> 
        <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong> 
        <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong> 
        <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong> 
       </div> 
</div> 
     </form> 

    </div>

稍微更新CSS：

#slideSource { 
    position:relative; 
} 

#toshiba, #acer, #hp { 
opacity:0; 
    position:absolute; 

} 

#toshiba.fadeout, #acer.fadeout, #hp.fadeout { 
opacity:0; 
transition: opacity 1s; 
} 
#toshiba.fadein, #acer.fadein, #hp.fadein { 
    opacity:1; 
    transition: opacity 1s; 
}

和JS：

document.getElementById('sel').onchange = function(){ 
var slideSource = document.getElementById('slideSource'); 

    target=this.value.replace('lap',''); 



    divs=slideSource.getElementsByTagName('div'); 

    for(i=0;i<divs.length;i++) { 
     if(divs[i].id!=target) { 
      divs[i].className = 'fadeout'; 

     } 
     else { 
      divs[i].className = 'fadein'; 
     } 

    } 
}

DEMO>http://jsfiddle.net/3qfgyzrz/

来源

2015-09-14 21:03:36 sinisake

使用javascript淡入和淡出

回答

相关问题