Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 15.12.2017, 14:44
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

О. у нас кнопки с одинаковыми классами, а если их сделать разными классами? например redBtn,yellowBtn, greenBtn, blueBtn и actBtn тогда что в коде нужно сделать? Спасибо!

Последний раз редактировалось 3dartmax, 15.12.2017 в 16:34.
Ответить с цитированием
  #12 (permalink)  
Старый 15.12.2017, 15:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 3dartmax
что в коде нужно сделать?
Знаете ли вы селекторы?

https://javascript.ru/forum/misc/717...v-input-2.html
Ответить с цитированием
  #13 (permalink)  
Старый 15.12.2017, 16:36
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

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("#redBtn, #yellowBtn, #greenBtn, #blueBtn");
            var img = content.querySelectorAll(".preview");
            var selected = [].indexOf.call(a, target);
            [].forEach.call(a, function(el, i) {
                 (i == selected) ? (el.classList.add("actBtn"), img[i].classList.add("act")):
                  (el.classList.remove("actBtn"), img[i].classList.remove("act"))
            })
        }
    })
});


Верно?

Последний раз редактировалось 3dartmax, 15.12.2017 в 16:41.
Ответить с цитированием
  #14 (permalink)  
Старый 15.12.2017, 17:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 3dartmax
Верно?
а проверить? 5-ю строку тоже нужно изменить, если вы убрали класс
Ответить с цитированием
  #15 (permalink)  
Старый 15.12.2017, 17:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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 {
    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.actBtn {
   border-radius: 12px;
   border-width: thick;
}
:focus{
    outline:0;

  }

</style>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    var content = document.querySelector(".slider");
    var a = content.querySelectorAll("#redBtn, #yellowBtn, #greenBtn, #blueBtn");
    var img = content.querySelectorAll(".preview");
    content.addEventListener("click", function(event) {
        var target = event.target;
        var selected = [].indexOf.call(a, target);
        if (selected !== -1) {
            event.preventDefault();
            [].forEach.call(a, function(el, i) {
                 (i == selected) ? (el.classList.add("actBtn"), img[i].classList.add("act")):
                  (el.classList.remove("actBtn"), 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 actBtn" id="redBtn">Red</button>
            <button class="btn yellow" id="yellowBtn">Yellow</button>
            <button class="btn green" id="greenBtn">Green</button>
            <button class="btn blue" id="blueBtn">Blue</button>
        </div>
</div>

</body>
</html>
Ответить с цитированием
  #16 (permalink)  
Старый 15.12.2017, 22:55
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

Понял, а без массива возможно реализовать также?
Ответить с цитированием
  #17 (permalink)  
Старый 15.12.2017, 23:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 3dartmax
без массива
?
не понимаю, без "делегирования" можно, назначить каждой кнопке клик.
Ответить с цитированием
  #18 (permalink)  
Старый 16.12.2017, 04:29
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

в самой функции или навесить клик на кнопки? подскажите плз...
Ответить с цитированием
  #19 (permalink)  
Старый 16.12.2017, 09:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

3dartmax,
я пас, мне сложно понять ваши формулировки.
Ответить с цитированием
  #20 (permalink)  
Старый 17.12.2017, 02:31
Интересующийся
Отправить личное сообщение для 3dartmax Посмотреть профиль Найти все сообщения от 3dartmax
 
Регистрация: 14.12.2017
Сообщений: 17

я имею ввиду onclick на самой кнопке или в функции чтото поменять?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция вызывается несколько раз KiberQ Общие вопросы Javascript 11 01.03.2017 15:45
Как организовать два слайдера по принципу обложка-внутренние страницы? helgajijka jQuery 4 06.09.2015 13:52
не вызывается функция при изменении option soft4you Общие вопросы Javascript 1 23.07.2014 17:41
Два слайдера на странице ureech Элементы интерфейса 1 14.05.2014 15:56
AJAX функция для новых html-элементов broadcast77 AJAX и COMET 25 03.03.2014 14:01