Переключение непрозрачности 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 ж класс 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.