Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 11.03.2019, 21:40
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Сорри, не совсем правильно обьяснила
Сообщение от Блондинка Посмотреть сообщение
Есть <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
Ответить с цитированием
  #12 (permalink)  
Старый 11.03.2019, 21:54
Аватар для NeoN
Аспирант
Отправить личное сообщение для NeoN Посмотреть профиль Найти все сообщения от NeoN
 
Регистрация: 01.03.2013
Сообщений: 69

Сообщение от Блондинка Посмотреть сообщение
Есть <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>

Последний раз редактировалось NeoN, 11.03.2019 в 21:56.
Ответить с цитированием
  #13 (permalink)  
Старый 11.03.2019, 21:54
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

<style>
#a1 { background: white; text-align: left; }
#b1 { color: blue;  }
#a2 { background: blue; text-align: left; }
#b2 { color: white;  }
</style>
Ответить с цитированием
  #14 (permalink)  
Старый 11.03.2019, 21:57
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,439

Сообщение от Блондинка
а1 заменить на а2 и соответственно б1 на б2
Если изменяются идентификаторы, значит ваша верстка и код обслуживающий неудачны.
Ответить с цитированием
  #15 (permalink)  
Старый 11.03.2019, 22:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,904

Блондинка,
через 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, 22:05
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Super !
Ответить с цитированием
  #17 (permalink)  
Старый 11.03.2019, 22:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,904

Блондинка,
<!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>
Ответить с цитированием
  #18 (permalink)  
Старый 11.03.2019, 22:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,439

Сообщение от Блондинка
Super !
Нельзя так, это абсурд.
Ответить с цитированием
  #19 (permalink)  
Старый 11.03.2019, 23:17
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

laimas,
а можно похожий вопрос? есть <div id="animation"></div> как сделать обновление дива по клику(запустить повторно анимацию) без перезагрузки страницы, оговорюсь сразу - это не имеет никакого отношения к первому вопросу.
Ответить с цитированием
  #20 (permalink)  
Старый 11.03.2019, 23:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,439

Сообщение от Блондинка
как сделать обновление дива по клику(запустить повторно анимацию) без перезагрузки страницы
А почему анимация, если это анимация элемента, должна вызывать перезагрузку страницы?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запомнить потомка, пототомов у родительского элемента? 1975andrei Общие вопросы Javascript 5 25.01.2013 14:57
Как узнать имя элемента syegorius Events/DOM/Window 3 12.10.2011 17:07
как изменить css свойсво нескольких елементов? IIIgun Общие вопросы Javascript 17 12.08.2011 11:20
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 07:52
Как можно изменить URL в адресной строке браузера? балерун Events/DOM/Window 12 17.11.2009 12:08