Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как изменить ID у элемента? (https://javascript.ru/forum/misc/42036-kak-izmenit-id-u-ehlementa.html)

natureproj 10.10.2013 01:39

Как изменить 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());

не получается.

рони 10.10.2013 02:29

natureproj,
id неуникально ?

natureproj 10.10.2013 02:43

нет же, видишь в примере. Только 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>

рони 10.10.2013 02:43

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>

рони 10.10.2013 02:49

natureproj,
все id должны быть уникальньны на странице

natureproj 10.10.2013 03:12

благодарю=) Помогло!

Блондинка 11.03.2019 22:02

Есть <div id="a1"><span id="b1">text one</span></div> как сделать чтобы при клике на див менялось на <div id="a1"><span id="b1">text two</span></div> а при повторном клике вернулось обратно? Одним словом словом чтобы при клике менялось туда-обратно.

рони 11.03.2019 22:09

Блондинка,
https://javascript.ru/forum/showthread.php?p=383893

Блондинка 11.03.2019 22:25

рони, при одном клике должно меняться ид и у дива и у спана, просто у элементов с ид х1 одни стили у элементов с ид х2 другие.

рони 11.03.2019 22:33

Блондинка,
не понимаю

Блондинка 11.03.2019 22:40

Сорри, не совсем правильно обьяснила
Цитата:

Сообщение от Блондинка (Сообщение 504621)
Есть <div id="a1"><span id="b1">text one</span></div> как сделать чтобы при клике на див менялось на <div id="a2"><span id="b2">text one</span></div> а при повторном клике вернулось обратно? Одним словом словом чтобы при клике менялось туда-обратно.

P. S.забыла а1 заменить на а2 и соответственно б1 на б2

NeoN 11.03.2019 22:54

Цитата:

Сообщение от Блондинка (Сообщение 504621)
Есть <div id="a1"><span id="b1">text one</span></div> как сделать чтобы при клике на див менялось на <div id="a1"><span id="b1">text two</span></div> а при повторном клике вернулось обратно? Одним словом словом чтобы при клике менялось туда-обратно.



<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>

Блондинка 11.03.2019 22:54

<style>
#a1 { background: white; text-align: left; }
#b1 { color: blue;  }
#a2 { background: blue; text-align: left; }
#b2 { color: white;  }
</style>

laimas 11.03.2019 22:57

Цитата:

Сообщение от Блондинка
а1 заменить на а2 и соответственно б1 на б2

Если изменяются идентификаторы, значит ваша верстка и код обслуживающий неудачны.

рони 11.03.2019 23:01

Блондинка,
через 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>

Блондинка 11.03.2019 23:05

Super !

рони 11.03.2019 23:08

Блондинка,
<!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 11.03.2019 23:19

Цитата:

Сообщение от Блондинка
Super !

Нельзя так, это абсурд.

Блондинка 12.03.2019 00:17

laimas,
а можно похожий вопрос? есть <div id="animation"></div> как сделать обновление дива по клику(запустить повторно анимацию) без перезагрузки страницы, оговорюсь сразу - это не имеет никакого отношения к первому вопросу.

laimas 12.03.2019 00:29

Цитата:

Сообщение от Блондинка
как сделать обновление дива по клику(запустить повторно анимацию) без перезагрузки страницы

А почему анимация, если это анимация элемента, должна вызывать перезагрузку страницы?

Блондинка 12.03.2019 00:32

Цитата:

Сообщение от laimas (Сообщение 504634)
Нельзя так, это абсурд.

Почему нельзя? И почему абсурд? надо просто показать что будет с дивом и спаном если изменить конкретные свойства, фон и цвет взяты просто для примера.

Блондинка 12.03.2019 00:36

Что бы не пользоваться кнопками обновить установленнымм в браузере, надо сделать клик По элементу

laimas 12.03.2019 00:52

Цитата:

Сообщение от Блондинка
Почему нельзя? И почему абсурд?

Вас зовут Лена и у вас есть сестра Катя. Ваши имена в пределах вашей семьи есть уникальные идентификаторы. Ваш отец может обратиться к вам:
- Дочери мои.
И вы будете понимать, что это касается вас обоих. Если обращение по имени, то только конкретно кого-то из вас.
Для того чтобы распределить между вами обязанности, кто когда из вас ответственен по кухне, а кто по уборке, ваш отец решил так:
- Лена отвечает за кухню, Катя за уборку. Завтра Лена будет носить имя Катя и отвечать за уборку, а Катя будет Леной и отвечать за кухню. Потом имена опять поменяются и т.д.

Абсурд?

laimas 12.03.2019 00:59

Цитата:

Сообщение от Блондинка
Что бы не пользоваться кнопками обновить установленнымм в браузере

Ничего не понял, причем тут кнопки браузера и анимация.

Malleys 12.03.2019 01:22

Это нажатие по <div> без tabindex у вас как хлопок одной ладошкой или звук без источника звука... конечно можно изловчиться и нажать мышкой!

За что вы так ненавидите тех, у кого нет мыши?

Используйте <button> (вы же хотите, чтобы туда нажали, так используйте <button>, это кроссбраузерное решение), в данном случае <div> является совершенно бессмысленным!

Блондинка 12.03.2019 01:31

задача простая, есть див с анимацией, которая остановилась согласно прописанным условиям в стиле, надо сделать чтобы по клику на див анимация запускалась снова, чтобы не пользоваться браузерными кнопками

Блондинка 12.03.2019 01:44

А Лена и Катя причем? если меня назвали Ирой.
на странице
text-align описывается это свойство и надо показать что будет если изменить значение с left на right и только, ну это разумеется пример,

laimas 12.03.2019 02:15

Цитата:

Сообщение от Блондинка
А Лена и Катя причем?

А при том, что атрибуты id, это те же Лена, Катя и т.п., имена которые индивидуальны среди множества элементов на странице, как и имена в кругу семьи. Но если смена имени в кругу семьи, это для вас тоже абсурд, то почему смена id на странице, это в порядке вещей?

Группу элементов на странице можно адресовать по общим признакам - имени тега, имени класса, и атрибутам, но за и исключением атрибута id. Атрибут id служит единственной задаче - адресации только одного элемента среди набора.

Если на странице имеются элементы с одинаковыми id, это непонимание их назначения. Если элементам даются id, которые затем изменяются на странице, значит это непорядок на странице. А всякое обсуждение по ротации id среди элементов на странице, это уже извращения. ;)

Malleys 12.03.2019 02:27

Цитата:

Сообщение от Блондинка
...сайты https://jsfiddle.net и http://plnkr.co с телефона не откроешь, а каждый раз бегать к соседям, чтобы на компьютере посмотреть, так они просто пошлют.

Без разницы, смотреть в компьютере или планшете или телефоне... всё одинаково работает... Ещё есть https://codepen.io/pen

Цитата:

Сообщение от Блондинка
задача простая, есть див с анимацией, которая остановилась согласно прописанным условиям в стиле, надо сделать чтобы по клику на див анимация запускалась снова, чтобы не пользоваться браузерными кнопками

Можно удалить элемент из DOM, а затем вставить в то же самое место, это приведёт к повторному запуску анимации.

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>


Скрипт удаляет и вставляет обратно любой элемент на странице, вы можете уточнить, к каким элементам применяется анимация!

Блондинка 12.03.2019 02:33

laimas, я уже представилась, значит можно сказать что мы почти познакомились, а теперь расскажи как обновить див при клике по нему а также при клике По кнопке

Блондинка 12.03.2019 02:33

laimas, я уже представилась, значит можно сказать что мы почти познакомились, а теперь расскажи как обновить див при клике по нему а также при клике по кнопке

laimas 12.03.2019 02:38

Цитата:

Сообщение от Блондинка
я уже представилась

Где и когда, я не мог забыть такого момента. ) Насчет анимации я не знаю, все зависит от того, что она из себя представляет и кто ее обрабатывает. Например, это CSS, и запуск ее по наличии класса, значит достаточно переопределить класс элемента.

Malleys 12.03.2019 02:40

Посмотрите пост №29, если только вы не про тот самый загадочный способ анимации, который не выражается при помощи CSS анимации или веб-компонентов!

Блондинка 12.03.2019 02:52

Сорри, раньше не видела пост 29, всё супер

рони 12.03.2019 12:27

анимация по клику
 
: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>

Блондинка 12.03.2019 21:12

рони, лучше бы рассказал как обновить див с анимацией по клику по самому диву без всяких кнопок

рони 12.03.2019 21:36

Блондинка,
не понимаю вопроса и недостаточно скилов в css и тригонометрии

Блондинка 12.03.2019 21:50

рони, надо чтобы див обновился(антмация запустилась сначала) по клику по диву, а не по кнопке,

рони 12.03.2019 21:53

Блондинка,
... так пост 29 и 34 :-?

Блондинка 12.03.2019 21:54

Ага, но только без кнопки


Часовой пояс GMT +3, время: 05:29.