切換div的不透明度

Question

我正在嘗試編寫切換div的不透明度的代碼，但我遇到了麻煩。如果我點擊這個按鈕，我希望它將#infodiv的不透明度設置爲1.0，現在它設置爲0.0，就像這樣。

#infodiv{ 
    width: 250px; 
    height: 0px; 
    margin-top: 10%; 
    opacity: 0.0; 
} 

這是我試圖調用的函數。

function toggles(){ 
    infodiv.css('opacity', '1.0'); 
} 

它可能是需要一些調整，可能是功能？感謝任何人願意看看幫助。這裏有一個fiddle

Answer 1

您必須設置元素的風格用jQuery：

function toggles() { 
    $('#infodiv').css('opacity', '1.0'); 
} 

Answer 2

您需要ID selector它返回一個jQuery對象的方法.css()使用是一個jQuery功能

function toggles() { 
    $('#infodiv').css('opacity', '1.0'); 
} 

DEMO

不過，我會建議你創建一個CSS類像

.higheropacity { 
    opacity: 1.0 !important 
} 

然後使用.toggleClass()方法

function toggles() { 
    $('#infodiv').toggleClass('higheropacity'); 
} 

DEMO

Answer 3

最簡單的方法來切換的東西是否顯示在jQuery是與.toggle()

$('#infodiv').click(function(){ 
    $(this).toggle(); 
}) 

如果您需要更改不透明度，然後嘗試toggleClass()並創建一個ne w^CSS類，它具有透明度1

// CSS 

.opaque{ 
    opacity: 1; 
} 

// jQuery 

$('#infodiv').click(function(){ 
    $(this).toggleClass('opaque'); 
}) 

Answer 4

如果使用純JavaScript，你的功能將看起來像

function toggles(){ 
    document.getElementById('infodiv').style.opacity = '1.0'; 
} 

Answer 5

使用Element.classList

var infodiv = document.querySelector("#infodiv"); 
 

 
function clickToggle(){ 
 
    this.classList.toggle("active") 
 
} 
 

 
infodiv.addEventListener("click",clickToggle, false);

#infodiv{ 
 
width: 250px; 
 
height: 250px; 
 
background: red; 
 
opacity: 1; 
 
} 
 
#infodiv.active{opacity: 0}

<div id=infodiv></div>

Answer 6

$(function() { 
 
    $('#btn').click(function() { 
 
     $('#infodiv').toggleClass('active'); 
 
    }); 
 
});

#infodiv { 
 
    width: 250px; 
 
    margin-top: 10%; 
 
    opacity: 0.0; 
 
} 
 
#infodiv.active { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="infodiv"> 
 
    <div class="infotext">This is a test.</div> 
 
</div> 
 
<button type="button" id="btn">btn</button>

Answer 7

那麼，除了jQuery的一個，你總是可以做這樣的事情

function toggles() { 
    document.getElementById('infodiv').style.opacity = 1; 
} 

如果你喜歡使用純JavaScript。