(JavaScript и HTML) Изменить непрозрачность кнопки при нажатии

Я создавал кнопку, при нажатии на которую непрозрачность изменялась на 0,5. Если щелкнуть еще раз, все вернется в нормальное состояние. Я не могу понять, что я делаю неправильно.

Я старался:

$(() => {
  $(document).on("click", ".test", function() {
    document.getElementsByClassName('test').style.opacity = "0.5";
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type = "button" class = "test"></button>

Не могли бы вы рассказать немного подробнее о том, что вы делаете или не делаете, чего вы хотите/ожидаете?

— 13.07.2019 06:26

document.getElementsByClassName() возвращает массив, измените на document.getElementsByClassName()[0], чтобы получить первый элемент.

— 13.07.2019 06:40

javascript html css google-chrome-extension

13.07.2019 06:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 162

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Я бы использовал классовую систему. В JQuery есть функция toggleClass, которую я бы использовал для работы.

$(document).click(function() {
    $(".test").toggleClass("transparent");
});

и CSS будет

<style>
    .test {
        opacity: 1;
    }
    .test.transparent {
        opacity: 0.5;
    }
</style>

13.07.2019 06:27

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <button type = "button" class = "test">Button</button>    

<script>
$(".test").on( "click", function() {
    $(".test").css("opacity", 1.5 - $(".test").css("opacity"));
});
</script>
</body>
</html>

13.07.2019 06:37

jQuery также предоставляет функцию toggleClass, как говорится, для переключения класса:

$(document).click(function() {
    $(".test").toggleClass("toogleTransparentClass");
});

13.07.2019 06:38

Пожалуйста, попробуйте это

<button class = "button_click">CLICK HERE</button>

<style>
 .button_click{background:#F00; color:#FFF; padding:10px 50px; border:none; cursor:pointer;}
 .transperent{opacity:0.5;}
</style>

<script>
  $(document).ready(function(){
     $("button").click(function(){
        $(".button_click").toggleClass("transperent");
     });
  });
</script>

УВЕДОМЛЕНИЕ: Пожалуйста, включите этот файл:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Джсфиддл

https://jsfiddle.net/dipeshm/f3m6g24w/13/

13.07.2019 06:45

Другие вопросы по теме

Чистый CSS, чтобы навести курсор на div, скрыть содержимое, а затем отобразить новый текст

Как добавить defaultprops или значение в реакцию

Преобразование Audio Blob в текст в Python с использованием распознавания речи

Как установить кнопку + вертикальный центр с элементом ввода?

Считаются ли внутренние вкладки панели навигации ссылками или кнопками в целях доступности и какие псевдосостояния они требуют?

Как изменить значение радиокнопки с неопределенного

Каким будет самый эффективный способ создать этот тяжелый проект javascript и css?

Мне нужно увеличить значение моей переменной x, если вход проверен, а затем предупредить общее количество x

Как динамически добавить имя ng-модели в шаблон, добавленный динамически с помощью ng-repeat и нажатия кнопки?

Как я могу контролировать (на всех устройствах и в браузерах), будет ли символ отображаться в виде эмодзи или текстовой версии?

(JavaScript и HTML) Изменить непрозрачность кнопки при нажатии

Ответы 4

Другие вопросы по теме

Похожие вопросы