Изменять картинки
Привет всем!
Я хочу на чистом javascripte написать script, но не получается. Подскажите пожалуйста что я сделал не правильно. Задача такая при вебере флажка нужно изменять название картинке в тег img. Для этого я даже создал несколько массивов чтобы создать новы массив и сравнит с помощью if но не получается. <!--FORM 1 START есть 3 таких форм--> <form class="pasive" action="mail.php" method="post" name="landing" enctype="multipart/form-data"> <div class="pasive_up"> <img src="img/icon_cart.png" alt="" class="cart_logo"> <img src="img/stars/stars1.png" alt="" class="cart_star"> </div> <p><input type="checkbox" id="cart_active1" data-price="4000" name="design"><label for="cart_active1">Дизайн</label></p> <p><input type="checkbox" id="cart_active2" data-price="2000" name="logo"><label for="cart_active2">Лого</label></p> <p><input type="checkbox" id="cart_active3" data-price="500" name="animation"><label for="cart_active3">Анимация</label></p> <p><input type="checkbox" id="cart_active4" data-price="800" name="slider"><label for="cart_active4">Слаидер</label></p> <p><input type="checkbox" id="cart_active5" data-price="800" name="galery"><label for="cart_active5">Галерия</label></p> <p><input type="checkbox" id="cart_active6" data-price="600" name="contacts"><label for="cart_active6">Связи с сайта</label></p> <p><input type="checkbox" id="cart_active7" data-price="600" name="chat"><label for="cart_active7">Онлайн чат</label></p> <p><input type="checkbox" id="cart_active8" data-price="1300" name="seo"><label for="cart_active8">Оптимизация</label></p> <p><label for="pasive_name1">имя и фамиля</label><input type="text" id="pasive_name1" name="name"></p> <p><label for="pasive_email1">почта</label> <input type="email" id="pasive_email1" name="email"></p> <p><select name="select_contact" > <option value="Skype">Skype</option> <option value="Telegram">Telegram</option> <option value="Viber">Viber</option> </select> <input type="text"id="pasive_phone1" name="number_contact"></p> <p><label for="pasive_file1">ТЗ</label><input type="file" id="pasive_file1" value="ТЗ" name="file_tz"></p> <span class="score" id="score1">Ваш заказ стоит 0 рублей</span> <button class="count" >Заказать сейчас</button> <i class="icon-cancel-circled cart_close"></i> </form> let one = ['design', 'galery', 'slider', 'contacts']; let to = ['design', 'galery', 'slider', 'contacts', 'logo', 'animation']; let three = ['design', 'galery', 'slider', 'contacts', 'logo', 'animation', 'chat', 'seo']; let four = ['design', 'text', 'pro', 'aux', 'logo', 'device', 'siti', 'action']; let five = ['porto', 'back', 'front', 'fritail', 'languiges', 'lanch', 'chat', 'seo']; let pasiv = document.querySelectorAll('.pasiv'); for (let i = 0; i < pasiv.length; i++) { let inp = pasiv[i].querySelectorAll('input[type="checkbox"]'); for (let i = 0; i < inp.length; i++) { inp[i].oninput = function(){ let mas = []; for (let i = 0; i < inp.length; i++) { if (inp[i].checked) { let star = 'img/stars/stars3.png'; star_img.src = star; } } } } }; |
Hovik,
:-? |
рони,
вот ссылка, к стати калькулятор тоже смотрите, оцените код http://test.strides.website/ кнопка подробно |
рони,
Я немножко изменял код, теперь по-моему стало понятным, все действие происходить по включение и отключение флажка, если включить флажок то сработает калькулятор и вместе с этим должен в пустом массиве добавятся значение текущего элемента а при отключение должен удалятся текущий элемент из массива. После этого сравниваем этот массив с 5 других массивов (one, too, three, four, five) и если совпадает с (too) то img.src = img2; если three то img.src = img3; дефолдные значение == img; Заранее благодарю за помощь. window.onload = cart; let one = ['design', 'galery', 'slider', 'contacts']; let too = ['design', 'galery', 'slider', 'contacts', 'logo', 'animation']; let three = ['design', 'galery', 'slider', 'contacts', 'logo', 'animation', 'chat', 'seo']; let four = ['design', 'contacts', 'slider', 'galery']; let five = ['design', 'galery', 'logo', 'animation', 'chat', 'seo']; let img = 'img/stars/stars1.png'; let img2 = 'img/stars/stars2.png'; let img3 = 'img/stars/stars3.png'; let img4 = 'img/stars/stars4.png'; let img5 = 'img/stars/stars5.png'; function cart() { let masiv = []; let carts = document.querySelectorAll('.pasive'); carts.forEach((item) => { let sum = 0; let img = item.querySelector('.cart_star'); let span = item.querySelector('.score'); let checks = item.querySelectorAll('input[type="checkbox"]'); checks.forEach((item, index) => { item.oninput = function() { if (item.checked) { sum += Number(item.dataset.price); span.innerHTML = 'first ' + sum + ' last'; // masiv.push(item.name); // masiv.sort(); img.src = img2; masiv.splice( masiv.index, 0, item.name); console.log(index); console.log(masiv); console.log(item.index); } else { sum -= Number(this.dataset.price); span.innerHTML = 'first ' + sum + ' last'; masiv.splice( masiv.index, 1); // console.log(item); console.log(masiv); // console.log(item.checked == 0); } }; // console.log(item); }) // console.log(img); }); }; |
фишка
let too = ['design', 'galery', 'slider', 'contacts', 'logo', 'animation']; let three = too.concat(['chat', 'seo']) |
j0hnik,
Извините не понял, можете подробно объяснит. |
Hovik,
window.addEventListener("load", function() { let sample = [ ['design', 'galery', 'slider', 'contacts'], ['design', 'galery', 'slider', 'contacts', 'logo', 'animation'], ['design', 'galery', 'slider', 'contacts', 'logo', 'animation', 'chat', 'seo'], ['design', 'contacts', 'slider', 'galery'], ['design', 'galery', 'logo', 'animation', 'chat', 'seo'] ] let carts = [...document.querySelectorAll('.pasive')]; carts.forEach((form) => { let sumOut = form.querySelector('.score'); let img = form.querySelector('.cart_star') form.addEventListener("change", () => { let checks = [...form.querySelectorAll('input[type="checkbox"]:checked')]; let sum = 0; let checksName = checks.map(item => (sum += +item.dataset.price, item.name)); sumOut.innerHTML = 'first ' + sum + ' last'; img.src = 'img/stars/stars1.png'; sample.forEach((pattern, i) => { pattern.every(title => checksName.includes(title)) && (img.src = 'img/stars/stars' + (++i) + '.png') }) }) }) }); |
рони,
Большое спасибо вам, но мне казалось что могу менять элементы в массиве и все будет работать, но кажется что и логика менялось прошу меня извинить но еще раз взгляните на массив там желаемый результаты написано в комментариях let sample = [ ['design', 'galery', 'slider', 'contacts'], //stars1.png ['design', 'galery', 'slider', 'contacts', 'chat', 'animation'], //stars2.png ['design', 'galery', 'slider', 'contacts', 'logo', 'animation', 'chat', 'seo'], //stars3.png ['design', 'text', 'programing', 'seo'], //stars1.png ['design', 'text', 'programing', 'seo', 'registration', 'panel'], //stars2.png ['design', 'text', 'programing', 'seo', 'registration', 'panel', 'recording', 'languages'], //stars3.png ['design', 'text', 'programing', 'seo', 'registration', 'panel', 'Online_shop', 'languages'] //stars3.png ] |
Hovik,
перенесите комментарии в массив stars и замените (++i) |
Hovik,
напишите так далее, let sample = [{arr :['design', 'galery', 'slider', 'contacts'], src : 'stars1.png'}, ...] |
Часовой пояс GMT +3, время: 15:54. |