Форум

Блондинка · #11 (**permalink**) 11.03.2019, 22:40

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

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

Есть <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 · #12 (**permalink**) 11.03.2019, 22:54

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

Есть <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>

Блондинка · #13 (**permalink**) 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 · #14 (**permalink**) 11.03.2019, 22:57

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

а1 заменить на а2 и соответственно б1 на б2

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

рони · #15 (**permalink**) 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>

Блондинка · #16 (**permalink**) 11.03.2019, 23:05

Super !

рони · #17 (**permalink**) 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 · #18 (**permalink**) 11.03.2019, 23:19

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

Super !

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

Блондинка · #19 (**permalink**) 12.03.2019, 00:17

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

laimas · #20 (**permalink**) 12.03.2019, 00:29

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

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

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

Форум

Справочник

Discord чат

Курсы javascript