Форум

3dartmax · #1 (**permalink**) 14.12.2017, 23:10

народ помогите с функцией... никак не пойму как addEventListener связать с z-index
если можно с построчными коментами... заранее спс !

https://gist.github.com/archivisions...8ce81589646d3a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
body {
    box-sizing: border-box;
}
 
.slider {
    background-color: rgba(229, 255, 248, 0.28);
    width: 500px;
    height: 500px;
    align-content: center;
    position: relative;
    border: 1px solid black;
}
#previewRed {
     width: 300px;
     height: 400px;
     position: absolute;
     background: red;
     padding: 10px;
     border: 1px solid black;
    text-align: center;
    color: white;
    z-index: 1;
 
 }
#previewYellow {
     width: 300px;
     height: 400px;
     position: absolute;
     background: #fffb1d;
     padding: 10px;
     border: 1px solid black;
    z-index: 2;
 }
#previewGreen {
    width: 300px;
    height: 400px;
    position: absolute;
    background: #5dc35e;
    padding: 10px;
    border: 1px solid black;
    text-align: center;
    color: white;
    z-index: 3;
}
#previewBlue {
    width: 300px;
    height: 400px;
    position: absolute;
    background: #655bc3;
    padding: 10px;
    border: 1px solid black;
    text-align: center;
    color: white;
    z-index: 4;
}
 
 
.contrl {
    position: relative;
    width: 100px;
    height: 400px;
    border: 1px solid rgba(70, 243, 19, 0.58);
    margin-left: 350px;
}
 
#red {
    position: absolute;
    width: 75px;
    height: 75px;
    background: red;
    border: 1px solid black;
    margin: 10px;
    color: white;
}
#yellow {
    position: absolute;
    width: 75px;
    height: 75px;
    background: #fffb1d;
    border: 1px solid black;
    margin: 10px;
    top: 100px;
}
#green {
    position: absolute;
    width: 75px;
    height: 75px;
    background: #5dc35e;
    border: 1px solid black;
    margin: 10px;
    color: white;
    top: 200px;
}
#blue {
    position: absolute;
    width: 75px;
    height: 75px;
    background: #655bc3;
    border: 1px solid black;
    margin: 10px;
    color: white;
    top: 300px;
}
</style>
    
<body>
<div class="slider">
        <div id="previewRed">Red</div>
        <div id="previewYellow">Yellow</div>
        <div id="previewGreen">Green</div>
        <div id="previewBlue">Blue</div>
        <div class="contrl">
            <button id="red">Red</button>
            <button id="yellow">Yellow</button>
            <button id="green">Green</button>
            <button id="blue">Blue</button>
        </div>
</div>
<script src="script.js"></script>
</body>
</html>

рони · #2 (**permalink**) 14.12.2017, 23:25

3dartmax,
https://javascript.ru/forum/misc/715...tml#post471483

3dartmax · #3 (**permalink**) 15.12.2017, 01:14

Спасибо, принцип похож, но всетаки хотелось бы с z-index-ом чтото... просто хочу разобратся с css+js...

рони · #4 (**permalink**) 15.12.2017, 10:05

3dartmax,
к сожалению, код по ссылке это то, что вам нужно

рони · #5 (**permalink**) 15.12.2017, 10:49

3dartmax,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
body {
    box-sizing: border-box;
}

.slider {
    background-color: rgba(229, 255, 248, 0.28);
    width: 500px;
    height: 500px;
    align-content: center;
    display: flex;
    justify-content: space-around;
    padding: 15px;
    border: 1px solid black;
}

.preview {
    width: 300px;
    height: 400px;
    position: absolute;
    padding: 10px;
    border: 1px solid black;
    text-align: center;
    color: white;
    z-index: 1;
    opacity: .3;
    transition: all .8s ease-in-out;
}

.contrl {
    position: relative;
    width: 100px;
    height: 400px;
    border: 1px solid rgba(70, 243, 19, 0.58);
    margin-left: 350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btn.red, .preview.red {
    background-color: red;
}
.btn.yellow, .preview.yellow  {
    background-color: #fffb1d;

}
.btn.green, .preview.green {
    background-color: #5dc35e;

}
.btn.blue, .preview.blue {
    background-color: #655bc3;

}

.btn{
    width: 75px;
    height: 75px;
    border: 1px solid black;
    margin: 10px;
    color: white;
    transition: all .3s ease-in-out;
}

.preview.act{
   z-index: 10;
   opacity: 1;
}
.btn.act {
   border-radius: 12px;
   border-width: thick;
}
:focus{
    outline:0;

  }

</style>
 <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    var content = document.querySelector(".slider");
    content.addEventListener("click", function(event) {
        var target = event.target;
        if (target = target.closest(".btn")) {
            event.preventDefault();
            var a = content.querySelectorAll(".btn");
            var img = content.querySelectorAll(".preview");
            var selected = [].indexOf.call(a, target);
            [].forEach.call(a, function(el, i) {
                 (i == selected) ? (el.classList.add("act"), img[i].classList.add("act")):
                  (el.classList.remove("act"), img[i].classList.remove("act"))
            })
        }
    })
});
  </script>
<body>
<div class="slider">
        <div class="preview red act">Red</div>
        <div class="preview yellow">Yellow</div>
        <div class="preview green">Green</div>
        <div class="preview blue">Blue</div>
        <div class="contrl">
            <button class="btn red act">Red</button>
            <button class="btn yellow">Yellow</button>
            <button class="btn green">Green</button>
            <button class="btn blue">Blue</button>
        </div>
</div>

</body>
</html>

3dartmax · #6 (**permalink**) 15.12.2017, 12:59

Спасибо! а можете объяснить строку с 93 по 100? вроде вербально понятно, но уловить пока все не могу...

Nexus · #7 (**permalink**) 15.12.2017, 13:11

3dartmax, "вербально" - устно? На web-форуме?)
Если кликнули по элементу с классом "btn" или у элемента есть родитель с этим классом (строка 93), то отменяем действие по умолчанию (94).
Находим на на странице все элементы с классом "btn" (95) и "preview" (96).
Ищем индекс элемента в массиве "а", на котором произошел клик (97).
Обходим все элементы массива "а" в цикле (98).
Если это элемент, по которому кликнули (99, до "?"), то добавляем элементам с классом "btn" и "preview" под индексом "i" класс "act" (99, после "?"), в противном случае удаляем класс "act" у названных ранее элементов (100).

3dartmax · #8 (**permalink**) 15.12.2017, 13:21

Спасибо огромное, бум грызть дальше!

Dilettante_Pro · #9 (**permalink**) 15.12.2017, 13:24

Nexus,
У "вербально" значение не только устно, но и словесно.
Так что в результате вы совершенно правильно, вполне вербально ответили.

Nexus · #10 (**permalink**) 15.12.2017, 13:25

Dilettante_Pro, благодарю за разъяснение

Форум

Справочник

Discord чат

Курсы javascript