БЛОГ НА HUSL


Как изменять значение стиля блока при нажатие на кнопку

Автор вопроса: user480491

Есть такой код:

var slide = document.querySelectorAll('.slider-dot')
                    function hideAll () {
                        slide.forEach(cNode => {
                            cNode.classList.remove('active');
                        });
                    }  
                    slide.forEach(function(e){
                        e.onclick = function(){
                            hideAll();
                            e.classList.add('active');
                        }
                    });
.slider-inner{
      display: inline-flex; overflow: hidden; height: 200px; width: 200px;
    }
    .slider-dot{

  position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #53a3e0;
    opacity: 0.3;
    cursor: pointer;
    margin: 0 3px 5px;
    -webkit-transition: background-color .1s,color .1s;
    transition: background-color .1s,color .1s;
    border-radius: 50%;
}
.active{
 opacity: 1;
}
<div class="slider-inner" >
    
    <div class="slider-slide" style="transform: translateX(0%);"><div class="picture-container" style="background-color: green;   width: 500px; height: 500px;"></div>
    </div>
    <div class="slider-slide" style="transform: translateX(0%);">
        <div class="picture-container" style="background-color: red;   width: 500px; height: 500px;"></div>
    </div>
    <div class="slider-slide" style="transform: translateX(0%);">
        <div class="picture-container" style="background-color: yellow;   width: 500px; height: 500px;"></div>
    </div>
    
</div>
<div class="slider-nav" >
    <div class="slider-dot active" ></div>
    <div class="slider-dot" ></div>
    <div class="slider-dot" ></div>
</div>

Как сделать так чтобы при нажатии на определённую кнопку менялся инлайн стиль transform, а точнее translateX. К примеру: чтобы при нажатии на первую кнопку translateX равнялся бы 0%, вот так: tranform: translateX(0%), на вторую -100%, на третью -200% и т.д. по списку. Заранее спасибо!


Источник

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

Автор решения: ΝNL993

Версия кода для указанного кол-ва кнопок

var slide = document.querySelectorAll('.slider-dot'),
sliders = document.querySelectorAll('.slider-slide'),
transX = 0

function hideAll() {
slide.forEach((cNode) => {
    cNode.classList.remove('active')
})
}
slide.forEach(function (e) {
e.onclick = function () {
    hideAll()
    e.classList.add('active')
}
})

for (let i = 1; i < slide.length + 1; i++) {
let x = transX
document
    .querySelector(`.slider-dot:nth-of-type(${i})`)
    .addEventListener('click', () => {
        sliders.forEach((e) => {
            e.style.transform = `translateX(${x}%)`
        })
    })
transX -= 100
}
.slider-inner{
      display: inline-flex; overflow: hidden; height: 200px; width: 200px;
    }
    .slider-dot{

  position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #53a3e0;
    opacity: 0.3;
    cursor: pointer;
    margin: 0 3px 5px;
    -webkit-transition: background-color .1s,color .1s;
    transition: background-color .1s,color .1s;
    border-radius: 50%;
}
.active{
 opacity: 1;
}
<!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" />
    <title>Test</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="slider-inner">
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="background-color: green; width: 500px; height: 500px"
            ></div>
        </div>
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="background-color: red; width: 500px; height: 500px"
            ></div>
        </div>
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="
                    background-color: yellow;
                    width: 500px;
                    height: 500px;
                "
            ></div>
        </div>
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="background-color: blue; width: 500px; height: 500px"
            ></div>
        </div>
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="background-color: cyan; width: 500px; height: 500px"
            ></div>
        </div>
    </div>
    <div class="slider-nav">
        <div class="slider-dot active"></div>
        <div class="slider-dot"></div>
        <div class="slider-dot"></div>
        <div class="slider-dot"></div>
        <div class="slider-dot"></div>
    </div>
    <script src="app.js"></script>
</body>
</html>

Код довольно простой, я также использовал стрелочные функции и addEventListener, надеюсь это не проблема для вас. НАПОМИНАЮ этот код подойдёт только с таким HTML!

Версия кода для неопределённого кол-ва кнопок:

var slide = document.querySelectorAll('.slider-dot'),
sliders = document.querySelectorAll('.slider-slide'),
transX = 0

function hideAll() {
slide.forEach((cNode) => {
    cNode.classList.remove('active')
})
}
slide.forEach(function (e) {
e.onclick = function () {
    hideAll()
    e.classList.add('active')
}
})

for (let i = 1; i < slide.length + 1; i++) {
let x = transX
document.querySelector(`.slider-dot:nth-of-type(${i})`).addEventListener('click', () => {
        sliders.forEach((e) => {
            e.style.transform = `translateX(${x}%)`
        })
    })
transX -= 100
}
.slider-inner{
      display: inline-flex; overflow: hidden; height: 200px; width: 200px;
    }
    .slider-dot{

  position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #53a3e0;
    opacity: 0.3;
    cursor: pointer;
    margin: 0 3px 5px;
    -webkit-transition: background-color .1s,color .1s;
    transition: background-color .1s,color .1s;
    border-radius: 50%;
}
.active{
 opacity: 1;
}
    <div class="slider-inner">
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="background-color: green; width: 500px; height: 500px"
            ></div>
        </div>
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="background-color: red; width: 500px; height: 500px"
            ></div>
        </div>
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="
                    background-color: yellow;
                    width: 500px;
                    height: 500px;
                "
            ></div>
        </div>
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="background-color: blue; width: 500px; height: 500px"
            ></div>
        </div>
        <div class="slider-slide" style="transform: translateX(0%)">
            <div
                class="picture-container"
                style="background-color: cyan; width: 500px; height: 500px"
            ></div>
        </div>
    </div>
    <div class="slider-nav">
        <div class="slider-dot active"></div>
        <div class="slider-dot"></div>
        <div class="slider-dot"></div>
        <div class="slider-dot"></div>
        <div class="slider-dot"></div>
    </div>

Объясняю код:

Для начала я создал новую переменную которая будет принимать значение translateX в будущем цикле, и так дальше я создал цикл for, который создавал события на каждую точку(.slide-dot), и он создавал события в зависимости от кол-во точек и к кол-ву точек добавлется 1 т.к. если не добавлять эту единицу то всегда будет пропускаться последняя точка. Далее в цикле для каждой строчки есть переменная x которая принимает значение 0, -100, -200 и т.д.(точнее значение переменной transX) и для каждой точки x это разное значение к примеру для первой точки x это 0, а для 2-ой -100, а если мы будем использовать переменную transX то тогда всегда будет процент последней "галереи". В конце цикла у transX отнимается 100 чтобы следующая точка задавала translateX на 100 меньше чем предыдущая. Надеюсь мой ответ был полезный.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.