Как сделать общую функцию, которая будет принимать display:block и display:none?

Question

Всем привет, хочу сделать функцию которая будет взаимодействовать с кнопками, pause, play, next track, previous трек. play - при нажатие на данную кнопку, будет воспроизводиться трек и появляться кнопка pause. pause - песня останавливается и показывает кнопку play. кнопка next track - при нажатие на нее задает display:none нажатому плееру(блоку). previous track - при нажатие будет накладывать на предыдущий блок displa:block. нужна какая-то общая функция. Для более понятного вопроса прикрепляю видос https://drive.google.com/file/d/10GPzB8V8xtWKdaxQR2UCmYv7StpMtn2F/view?usp=sharing

const tracks = [
    {
        track: 'Групи',
        artist: 'Платина & OG Buda',
        duration: '3:00',
        image: 'img/track_list/gruppy.jpg',
    },
    {
        track:'Как в первый раз',
        artist: 'Платина',
        duration: '3:04',
        image: 'img/track_list/kak_v_perviy_raz.jpg',
    },
    {
        track:'Ламбо',
        artist: 'Платина & FEDUK',
        duration: '3:28',
        image: 'img/track_list/lambo.jpg',
    },
    {
        track:'Валентина',
        artist: 'Платина',
        duration: '2:32',
        image: 'img/track_list/valentina.jpg',
    },
    {
        track:'Навсегда (feat. White Punk)',
        artist: 'Платина',
        duration: '2:13',
        image: 'img/track_list/navsegda.jpg',
    },
    {
        track:'На грязном (Диана)',
        artist: 'Платина',
        duration: '2:06',
        image: 'img/track_list/diana.jpg',
    },
    {
        track:'Salam',
        artist: 'Платина',
        duration: '2:41',
        image: 'img/track_list/salam_jpg.jpg',

    },
    {
        track:'Abu Dhabi Ba6y',
        artist: 'Платина & OG Buda & MAYOT',
        duration: '3:00',
        image: 'img/track_list/dhabi.jpg',
    },
]


const container = document.querySelector('.cards');  //возвращает первый элемент (Element) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение null.
const song = document.getElementById('song-template'); //возвращает ссылку на элемент по его идентификатору (ID); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута id в HTML или из скрипта.

const getTemplate = () => {
    const song = document.getElementById('song-template')
        .content.cloneNode(true);  //возвращает дубликат узла, из которого этот метод был вызван
        return song
}

const generateSong = ({data, element}) => {
    element.querySelector('.track').textContent = data.track;  //возвращает первый элемент, являющийся потомком элемента, на который применено правило указанной группы селекторов.
    element.querySelector('.artist').textContent = data.artist;
    element.querySelector('.end_track').textContent = data.duration;
    element.querySelector('.track_image').src = data.image;


    return element;
}

tracks.forEach((track) => {
    const template = getTemplate();
    const song = generateSong({data: track, element: template});
    container.appendChild(song);  //добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция appendChild() перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).
})

/* стили гугл */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Staatliches&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');


* {
    padding: 0;
    margin: 0;

}

/* начало - менюшки */
/* header img{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    

    position: absolute;
    width: 50px;
    height: 50px;
    left: 20px;
    top: 40px;
} */
/* конец - менюшки */


/* начало левый бар с ссылками */

/* начало кнопки - музыка */

.music_platina {
    position: absolute;
    top: -80px;

}

.music_platina a {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    line-height: 1.2;
}


/* конец кнопки - музыка */

.left_bar_social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;

    position: absolute;
    left: 40px;
    top: 120px;
}

.left_bar_social img {
    width: 30px;
    height: 30px;
    padding-bottom: 70px;
}

/* начало концерты */

.concert_artist a {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.2;
    color: black;

    padding-top: 0px;
}

/* конец концерты  */

/* конец - левый бар с ссылками */



.wrapper {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #9e9e9e 0%, #ffffff 30%, #6a6a6a 100%);
}

/* надпись - имя, дата */
.info_artist {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;

    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(transparent, transparent), url(https://thumbs.gfycat.com/ReadyFarawayLeopard-size_restricted.gif) repeat;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;

    position: absolute;
    width: 812px;
    height: 258px;
    left: 160px;
    top: 100px;
}

.name_artist {
    width: 394px;
    height: 95px;


    font-family: 'Indie Flower', cursive;
    font-weight: 600;
    font-style: normal;
    font-size: 60px;
    text-transform: uppercase;
}

/* .date_concert_artist {
    width: 334px;
    height: 91px;

    font-family: 'Circular Std';
    font-style: normal;
    font-weight: 400;
    font-size: 35px;
    line-height: 40px;
} */

/* конец - надпись имя, дата */


/* начало - скрины треков */
.cards {
    display: flex;
    flex-wrap: wrap;
    width: 1915px;
    text-align: center;
    transform: translateX(29%) translateY(-25%) rotateX(50deg) rotateZ(330deg) skewX(19deg) skewY(350deg);
}

.cards .tracks_list>img {
    display: inline-block;
    width: 350px;
    border-radius: 30px;
    margin-top: 40px;
    margin-bottom: 20px;

}

.cards>* {
    display: inline-block;
    width: 400px;
    aspect-ratio: 1 / 2;
    margin-right: 10px;
    border-radius: 30px;
    margin-bottom: 20px;
}


.cards>*:nth-child(1) {
    background: linear-gradient(0deg, #000000 0%, #000000 0%, #42353c 40%);
}

.cards>*:nth-child(2) {
    background: linear-gradient(0deg, #000000 0%, #000000 0%, #382239 40%);
}

.cards>*:nth-child(3) {
    background: linear-gradient(0deg, #000000 0%, #000000 0%, #312829 40%);
}

.cards>*:nth-child(4) {
    background: linear-gradient(0deg, #000000 0%, #000000 0%, #382239 40%);
}

.cards>*:nth-child(5) {
    background: linear-gradient(0deg, #000000 0%, #000000 0%, #2b1c2f 70%);
}

.cards>*:nth-child(6) {
    background: linear-gradient(0deg, #000000 0%, #000000 0%, #311e20 70%);
}

.cards>*:nth-child(7) {
    background: linear-gradient(0deg, #000000 0%, #000000 0%, #272c54 70%);
}

.cards>*:nth-child(8) {
    background: linear-gradient(0deg, #000000 0%, #000000 0%, #6a6a6c 70%);
}


/* .cards img>*:nth-child(7) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
 }

 .cards img>*:nth-child(8) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
 }  */

/* конец - скрины треков


@import url('https://fonts.googleapis.com/css2?family=Meera+Inimai&display=swap');
/*шрифт для название песни */

/* начало - верстка самого плеера */

.name_container {
    display: inline-block;
    margin-bottom: 30px;
    /* margin-right: 140px; */
}

.track {
    font-family: 'Meera Inimai', sans-serif;
    font-size: 19px;
    color: #f6eef3;
}

.artist {
    font-family: 'Meera Inimai', sans-serif;
    font-size: 19px;
    color: #a99ba6;
}

/* начало - прогресс бар */

.progress_bar{
    width: 300px;
    margin-left: 30px;
}



/* .progress_bar {
    display: flex;
    margin-left: 30px;

    width: 340px;
    height: 5px;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 10px;
}

.progress_bar::after {
    display: flex;
    justify-content: start;
    content: '';
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 1);
    filter: drop-shadow(0px 0px 4px rgba(46, 45, 45, 1));
    border-radius: 50%;
    box-sizing: border-box;
}

.progress_bar::before {
    display: flex;
    justify-content: start;
    content: '';
    transform: translateY(-50%);
    height: 5px;
    background: rgba(255, 255, 255, .3);
    border-radius: 5px;
    z-index: -1;
} */


/* конец - прогресс бар */

/* начало - тайминги */
.time_bar {
    display: flex;
    justify-content: space-between;

    margin-top: 15px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
    color: #a99ba6;
}

.start_track {
    font-family: 'Meera Inimai', sans-serif;
    font-size: 17px;
}

.end_track {
    font-family: 'Meera Inimai', sans-serif;
    font-size: 17px
}

/* конец - тайминги */

/* начало панели переключение */

.panel_players {
    display: flex;
    justify-content: space-around;
    flex-flow: row nowrap;
    margin-left: 10px;
    margin-bottom: 50px;
}

/* .panel_players img {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
} */

/* .panel_players:hover img {
    -webkit-filter: blur(0);
    filter: blur(0);
} */

.pause_active {
    display: none;
    /* max-width: 50px;
    padding: 40px */
}

.left_button img {
    max-width: 50px;
    padding: 40px;

    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.left_button:hover img{
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}


.play_button img {
    max-width: 50px;
    padding: 30px;

    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.play_button:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}


.right_button img {
    max-width: 50px;
    padding: 35px;

    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.right_button:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}



/* конец панели переключение */

/*  старт - громкость */

.panel_volume{
    padding-top: 8px;
}

.panel_volume input[type="range"] {
    display: block;
    -webkit-appearance: none;
    background-color: #bdc3c7;
    width: 250px;
    height: 5px;
    border-radius: 5px;
    margin: 0 auto;
    outline: 0;
}

.panel_volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #303331;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    transition: .4s ease-in-out;

}

.panel_volume input[type="range"]::-webkit-slider-thumb:hover {
    background-color: #000000;
}

.panel_volume input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.6);
}

/* конец - громкость */

.volume_regulator {
    position: relative;
    display: flex;
    justify-content: space-around;
    bottom: 15px;
}

.right_volume img {
    max-width: 20px;
    position: relative;
    right: 15px;
}

.left_volume img {
    max-width: 20px;
    position: relative;
    left: 15px;
}


.progress_bar input[type="range"] {
    display: block;
    -webkit-appearance: none;
    background-color: #bdc3c7;
    width: 350px;
    height: 5px;
    border-radius: 5px;
    margin: 0 auto;
    outline: 0;
}

.progress_bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    transition: .4s ease-in-out;

}

.progress_bar input [type="range"]::-webkit-slider-thumb:hover {
    background-color: #000000;
}

.progress_bar input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.6);
}

<!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="css/style.css">
    <title>Платина</title>
</head>
<body>
    <div class="wrapper">
        <!-- <header>
            <img src="img/b/b_bedolaga.png" alt="">
        </header> -->


        <div class="left_bar_social">
            <div class="music_platina">
                <a href="#">МУЗЫКА</a>
            </div>

            <a href="https://vk.com/platinarnbklub" target="_blank"><img src="img/social/vk.png" alt="vk"></a>
            <a href="https://www.instagram.com/platina300/?hl=ru" target="_blank"><img src="img/social/insta.png" alt="insta"></a>
            <a href="https://www.youtube.com/c/%D0%9F%D0%BB%D0%B0%D1%82%D0%B8%D0%BD%D0%B0300" target="_blank"><img src="img/social/youtube.png" alt="youtube"></a>
            <a href="https://t.me/sosamuzik300" target="_blank"><img src="img/social/telegram.png" alt="telegram"></a>
            <a href="https://music.apple.com/ru/artist/%D0%BF%D0%BB%D0%B0%D1%82%D0%B8%D0%BD%D0%B0/1309211809" target="_blank"><img src="img/social/apple_music.png" alt="apple music"></a>

            <div class="concert_artist">
                <a target="_blank" href="concert_platina/concert_platina.html">КОНЦЕРТЫ</a>
            </div>
        </div>

        <div class="info_artist">
                <div class="name_artist">
                    <p>ПЛАТИНА</p>
                </div>

                <!-- <div class="date_concert_artist">
                    <p>16.10.2022 MOSCOW</p>
                </div> -->
        </div>
        <!-- скрины треков -->
        <div class="cards">

            </div>
        </div>
    
            
        



        <template id="song-template">
            <div class="tracks_list" id="track-play-gruppy">
                <img class="track_image" src="img/track_list/gruppy.jpg" alt="">
                <div class="name_container">
                    <div class="track">Групи</div>
                    <div class="artist">Платина & OG Buda</div>
                </div>
                <div class="progress_bar">
                        <input class="song" type="range" min='0 'max="100" >
                </div>
                <div class="time_bar">
                    <div class="music-progress__time-item music-current-time start_track">0:00</div>
                    <div class="music-progress__time-item music-duration-time end_track">3:11</div>
                </div>
                <div class="panel_players">
                    <div class="left_button">
                        <img class="left-prev-track" src="img/button/left.png" alt="left">
                    </div>
                    <div class="play_button">
                        <img class='pause_active' id="some_pause_gruppy" src="img/button/pause.png"  alt="" >
                        <img class='play_active' id="some_play_gruppy"  src="img/button/play.png" alt="">
                    </div>
                    <div class="right_button">
                        <img  id="right-next-track" src="img/button/right.png" alt="">
                    </div>
                </div>

                <div class="volume_regulator">
                    <div class="left_volume">
                    <img src="img/button/volume-mute.png" alt="">
                    </div>
                    <div class="panel_volume">
                        <input type="range" min='0 'max="100" >
                    </div>
                        <div class="right_volume">
                    <img src="img/button/volume-up.png" alt="">
                    </div>
                </div>
            
            </div>
        </template>




    
            
            <audio id= "Grupy" src="mp3/grupy.mp3" controls ></audio>
            <audio id= "KakPerviyRaz" src="mp3/platina_kak_v_perviy_raz.mp3" controls></audio>
            <audio id= "Lambo" src="mp3/lambo.mp3"></audio>




    
<script src="js/app.js"></script>
</body>
</html>

БЛОГ НА HUSL

Как сделать общую функцию, которая будет принимать display:block и display:none?

Ответы (0 шт):