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

Блондинка 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

Цитата:

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

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


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