Как изменить ID у элемента?
Доброго времени суток всем, кто читает эту тему. такая проблема возникла:
не могу изменить id у обзаца: <div id="gruppa"> <div class="listok" id = "listok"> <p id="w" class = "word">Текст1</p> <p id="t" class ="translate">Текст2</p> </div> <div class="listok" id = "listok"> <p id="w" class = "word">Текст1</p> <p id="t" class ="translate">Текст2</p> </div> <div class="listok" id = "listok"> <p id="w" class = "word">Текст1</p> <p id="t" class ="translate">Текст2</p> </div> </div> В скрипте такая конструкция: $("div", $("#gruppa")).each(function() //перебираем все листики { if ($(this).zIndex()== max_z) { $(this).attr("id","listok1"); // у листика с максимальным индексом меняем id // вот тут я хочу поменять id у обзацев на w1 и t1 } }); Необходимо изменить id обзацев <p id="w'" class = "word">Текст1</p> <p id="t" class ="translate">Текст2</p> на w1 и t1 Элементов много, нужно изменить только в конкретном. Помогите пожалуйста с проблемой. Всем ответившим + PS Пробую так хотябы выбрать: console.log ($(".listok1 p:eq(1)").text()); console.log ($(".listok1 w").text()); не получается. |
natureproj,
id неуникально ? |
нет же, видишь в примере. Только id listok1 уникально становится в этой строчке $(this).attr("id","listok1");
то есть такой блок получается в произвольном месте: <div class="listok" id = "listok1"> <p id="w" class = "word">Текст1</p> <p id="t" class ="translate">Текст2</p> </div> |
natureproj,
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <style type="text/css"> #w1, #t1 { background: #FF0000; } #listok1{ border: 1px #00FF00 solid; } </style> <script src="https://code.jquery.com/jquery-latest.js"></script> <title></title> </head> <body> <div id="gruppa"> <div class="listok" id = "listok"> <p id="w" class = "word">Текст1</p> <p id="t" class ="translate">Текст2</p> </div> <div class="listok" id = "listok"> <p id="w" class = "word">Текст1</p> <p id="t" class ="translate">Текст2</p> </div> <div class="listok" id = "listok"> <p id="w" class = "word">Текст1</p> <p id="t" class ="translate">Текст2</p> </div> </div> <script> var max_z = 2; $("div", "#gruppa") .each(function (i, el) //перебираем все листики { if (i == max_z) { el.id = "listok1"; $('#w', el) .attr("id", "w1"); $('#t', el) .attr("id", "t1"); // у листика с максимальным индексом меняем id // вот тут я хочу поменять id у обзацев на w1 и t1 } }); </script> </body> </html> |
natureproj,
все id должны быть уникальньны на странице |
благодарю=) Помогло!
|
Есть <div id="a1"><span id="b1">text one</span></div> как сделать чтобы при клике на див менялось на <div id="a1"><span id="b1">text two</span></div> а при повторном клике вернулось обратно? Одним словом словом чтобы при клике менялось туда-обратно.
|
|
рони, при одном клике должно меняться ид и у дива и у спана, просто у элементов с ид х1 одни стили у элементов с ид х2 другие.
|
Блондинка,
не понимаю |
Сорри, не совсем правильно обьяснила
Цитата:
|
Цитата:
<div id="a1"><span id="b1">text one</span></div> <script> let div = document.querySelector('div'), span = document.querySelector('span'); div.addEventListener('click',()=>{ if (div.id == 'a1') { div.id = 'a2'; span.id = 'b2'; span.innerHTML = 'text two'; return; } div.id = 'a1'; span.id = 'b1'; span.innerHTML = 'text one'; }); </script> |
<style> #a1 { background: white; text-align: left; } #b1 { color: blue; } #a2 { background: blue; text-align: left; } #b2 { color: white; } </style> |
Цитата:
|
Блондинка,
через toggleClass() будет проще <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #a2{ background-color: #0000FF; padding: 5px; } #b2{ background-color: #FF00FF; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $.fn.idToggle = function (arrDivId, arrSpanId) { return this.each(function (i, el) { $(el).click( function () { var c = 0; return function () { c = ++c % arrDivId.length; $(el).attr("id", arrDivId[c]).find("span").attr("id", arrSpanId[c]) } }()); }) }; $("#a1").idToggle(["a1","a2"],["b1","b2"]) }); </script> </head> <body> <div id="a1"><span id="b1">text one</span></div> </body> </html> |
Super !
|
Блондинка,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> .a1 { background: white; text-align: left; } .a1 span{ color: blue; } .a1.act { background: blue; text-align: left; } .a1.act span{ color: white; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $(".a1").on("click", function() { $(this).toggleClass("act") }) }); </script> </head> <body> <div class="a1"><span>text one</span></div> </body> </html> |
Цитата:
|
laimas,
а можно похожий вопрос? есть <div id="animation"></div> как сделать обновление дива по клику(запустить повторно анимацию) без перезагрузки страницы, оговорюсь сразу - это не имеет никакого отношения к первому вопросу. |
Цитата:
|
Цитата:
|
Что бы не пользоваться кнопками обновить установленнымм в браузере, надо сделать клик По элементу
|
Цитата:
- Дочери мои. И вы будете понимать, что это касается вас обоих. Если обращение по имени, то только конкретно кого-то из вас. Для того чтобы распределить между вами обязанности, кто когда из вас ответственен по кухне, а кто по уборке, ваш отец решил так: - Лена отвечает за кухню, Катя за уборку. Завтра Лена будет носить имя Катя и отвечать за уборку, а Катя будет Леной и отвечать за кухню. Потом имена опять поменяются и т.д. Абсурд? |
Цитата:
|
Это нажатие по <div> без tabindex у вас как хлопок одной ладошкой или звук без источника звука... конечно можно изловчиться и нажать мышкой!
За что вы так ненавидите тех, у кого нет мыши? Используйте <button> (вы же хотите, чтобы туда нажали, так используйте <button>, это кроссбраузерное решение), в данном случае <div> является совершенно бессмысленным! |
задача простая, есть див с анимацией, которая остановилась согласно прописанным условиям в стиле, надо сделать чтобы по клику на див анимация запускалась снова, чтобы не пользоваться браузерными кнопками
|
А Лена и Катя причем? если меня назвали Ирой.
на странице text-align описывается это свойство и надо показать что будет если изменить значение с left на right и только, ну это разумеется пример, |
Цитата:
Группу элементов на странице можно адресовать по общим признакам - имени тега, имени класса, и атрибутам, но за и исключением атрибута id. Атрибут id служит единственной задаче - адресации только одного элемента среди набора. Если на странице имеются элементы с одинаковыми id, это непонимание их назначения. Если элементам даются id, которые затем изменяются на странице, значит это непорядок на странице. А всякое обсуждение по ротации id среди элементов на странице, это уже извращения. ;) |
Цитата:
Цитата:
UPD Пример... каждый раз, как нажимаете на кнопку, анимация запускается заново... <button id="animation">abc</button> <style> #animation { all: unset; position: relative; font-size: 300%; } #animation::before { content: ""; position: absolute; width: 100%; height: 3px; background: red; left: 0; top: 0; animation: animation 1s; } @keyframes animation { from { width: 0; } to { width: 100%; } } </style> <script> document.addEventListener("click", event => { var target = event.target; var parentNode = target.parentNode; parentNode.replaceChild(target, target); }); </script> Скрипт удаляет и вставляет обратно любой элемент на странице, вы можете уточнить, к каким элементам применяется анимация! |
laimas, я уже представилась, значит можно сказать что мы почти познакомились, а теперь расскажи как обновить див при клике по нему а также при клике По кнопке
|
laimas, я уже представилась, значит можно сказать что мы почти познакомились, а теперь расскажи как обновить див при клике по нему а также при клике по кнопке
|
Цитата:
|
Посмотрите пост №29, если только вы не про тот самый загадочный способ анимации, который не выражается при помощи CSS анимации или веб-компонентов!
|
Сорри, раньше не видела пост 29, всё супер
|
анимация по клику
:write:
<button id="animation" class="anim">abc</button> <style> #animation { all: unset; position: relative; font-size: 300%; } #animation::before { content: ""; position: absolute; width: 100%; height: 3px; background: red; left: 0; top: 0; } #animation.anim::before{ animation: animation 1s; } @keyframes animation { from { width: 0; } to { width: 100%; } } </style> <script> document.addEventListener("click", event => { var target = event.target; target.classList.remove("anim"); document.documentElement.clientWidth; target.classList.add("anim"); }); </script> |
рони, лучше бы рассказал как обновить див с анимацией по клику по самому диву без всяких кнопок
|
Блондинка,
не понимаю вопроса и недостаточно скилов в css и тригонометрии |
рони, надо чтобы див обновился(антмация запустилась сначала) по клику по диву, а не по кнопке,
|
Блондинка,
... так пост 29 и 34 :-? |
Ага, но только без кнопки
|
Часовой пояс GMT +3, время: 05:29. |