Как изменить 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, время: 17:47. |