Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2023, 09:58
Аспирант
Отправить личное сообщение для DenisZ Посмотреть профиль Найти все сообщения от DenisZ
 
Регистрация: 19.04.2022
Сообщений: 31

Показать/Скрыть объект
Здравствуйте!
Есть HTML-документ:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.6.3.js"></script>
    <script src="index.js"></script>  
    <title>Document</title>
</head>
<body>
    
    <div class="cont1">
        <div class="cont22" ><button id="b_open">Open</button></div>
    <div class="cont44"></div>
    <div class="cont33"><button id="b_open">Open</button></div>
        </div>
   <div class="cont5">
        <div class="cont2"></div>
        <div class="cont4"></div>
        <div class="cont3"></div>
</div> 
<button id="b_close">Close</button>

</body>
</html>


Есть CSS-стили:
Код:
.cont1{
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top:7%;
    padding: 1%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.099), rgb(255, 255, 255));
    border-radius: 7px;
    display:flex; 
    flex-direction: row;
    justify-content:space-evenly;
    z-index: 1;
}
.cont22,
.cont33{
    height: 200px;
    width:300px;
    padding: 20px;
    width:30%;
    display:inline-flex;
    flex-direction: row;
    justify-content:space-evenly;

    
}
.cont2,
.cont3{
    height: 200px;
    width:  300px;
    padding: 20px;
    display:inline-flex;
    flex-direction: row;
    background-color: blueviolet;
    justify-content: right;

}
.cont44{
    width: 10%;
    height: 100%;
    display:inline-flex;
    justify-content:space-evenly;

    
}
.cont4{
    width: 10%;
    height: 100%;
    display:inline-flex;
    justify-content:space-evenly;
    
}

.cont5{
    width:100%; 
    margin-top:-14%; 
    display:flex; 
    flex-direction: row;
    align-items: center; 
    justify-content:space-evenly;
    z-index: 2;
}


#b_open{
    height: 30px;
    cursor: pointer;
    background-color: red;
    color: black;
}

#b_close{
    height: 30px;
    border: none;
    background-color: black;
    color: white;
    cursor: pointer;   
}
Есть также JQuery:
$('#b_close').click(function(){
    $('.cont2, .cont3, .cont4').hide();
})

Явных ошибок VSCode не выдает, однако JQuery не работает.
ПОЧЕМУ?
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2023, 12:25
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

А неявные ошибки?
У вас index.js начинает работать до того, как парсер разобрал html код. И еще нет никакого элемента #b_close
Либо свой скрипт вставляйте в конец <body>,
Либо он должен быть таким
$(() => {
    $('#b_close').click(function(){
        $('.cont2, .cont3, .cont4').hide();
    })
})
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2023, 19:23
Аспирант
Отправить личное сообщение для DenisZ Посмотреть профиль Найти все сообщения от DenisZ
 
Регистрация: 19.04.2022
Сообщений: 31

Большое спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Полностью удалить объект 1lider Events/DOM/Window 8 07.06.2018 18:20
Добавить объект в другой объект фонарик Общие вопросы Javascript 5 11.10.2015 01:57
Создать объект в объекте Bryant-24 Общие вопросы Javascript 3 10.07.2013 16:06
jQuery (Как открыть объект в этом же окне, щёлкнув по нему мышкой) Объект кусок карты hadzhimuratov (X)HTML/CSS 32 18.06.2012 17:54
Передать ссылку на объект а не объект возникновения события Blazze Events/DOM/Window 0 11.10.2011 00:45