Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.09.2017, 20:48
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 401

Как поменять местами
Здравствуйте!
Есть две радио кнопки "Слева" и "Справа". При клике на кнопки должно переставляться изображение слева или справа относительно текста.
Подскажите, можно как это безболезненно реализовать. Текст приходит из другого импута через .keyup и может меняться в любой момент. Изображение так же может изменяться через .click
Со вставкой текста и изображения у меня проблем нет, а вот как сделать переключатель чтобы изображение ставить справа или слева относительно текста у меня проблема.
Вот макет:
<!-- Место где нужно переставлять местами  -->
<div id="positMansard">
 <img src=" "> <span id="krMod">Текст</span>
</div>
<!-- Переключатель позиции -->
<div class="btn-group" data-toggle="buttons">
  <label class="btn active"><input type="radio" name="position" value="1" checked>Слева</label>
  <label class="btn"><input type="radio" name="position" value="2">Справа</label>
</div>

Изначально я добавил перед изображением ещё один пустой span с id="krMod1", а в spane по умолчанию изменил на krMod2
И начал писать скрипт:
$(function() {
    var position = $('input[name="position"]');

    position.change(function(event) {
        var imgPos = $(this).val();
        if(imgPos == 2) {
            $("#krMod1").replaceAll($("#krMod2"));
        } else $("#krMod1").replaceWith($("#krMod2"));
       //console.log(imgPos);
    });
});

Но понимаю что что то не то я делаю. Вот пришёл на форум за советами и подсказками.

Последний раз редактировалось MC-XOBAHCK, 28.09.2017 в 20:51.
Ответить с цитированием
  #2 (permalink)  
Старый 28.09.2017, 21:00
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 203

Можно добавлять к родителю 'positMansard' - сlass вроде такого:
.class span{ float: left}
.class img {float:right}
Элементы выпадут из потока и поменяются местами.
Хотя это на любителя вариант, но вполне возможно так делать и проще, мне кажется.

Последний раз редактировалось void(), 28.09.2017 в 21:34.
Ответить с цитированием
  #3 (permalink)  
Старый 28.09.2017, 21:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,526

MC-XOBAHCK,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var position = $('input[name="position"]'), children = $("#positMansard").children();

    position.change(function(event) {
        var imgPos = position.index(":checked");
        children.eq(imgPos).appendTo("#positMansard")
    }).change();
});

  </script>
</head>

<body>
<!-- Место где нужно переставлять местами  -->
<div id="positMansard">
 <img src="https://javascript.ru/forum/image.php?u=60342"> <span id="krMod">Текст</span>
</div>
<!-- Переключатель позиции -->
<div class="btn-group" data-toggle="buttons">
  <label class="btn active"><input type="radio" name="position" value="1" checked>Слева</label>
  <label class="btn"><input type="radio" name="position" value="2">Справа</label>
</div>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 28.09.2017, 22:02
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 401

рони, СПАСИБО!
Работает. Я все новые для меня функции нашёл в документации, но мне нужно теперь время чтобы их разобрать.
Можно ли уточнить, как мне картинку позиционировать согласно названий кнопок. То есть чтобы при клике на "Слева" - слева находилась картинка.
Ответить с цитированием
  #5 (permalink)  
Старый 28.09.2017, 22:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,626

заменить
appendTo

на
prependTo
Ответить с цитированием
  #6 (permalink)  
Старый 28.09.2017, 22:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,526

Сообщение от MC-XOBAHCK
То есть чтобы при клике на "Слева" - слева находилась картинка.
строка 27 -- поменять местами текст и картинку
Ответить с цитированием
  #7 (permalink)  
Старый 28.09.2017, 22:16
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 401

j0hnik, СПАСИБО - теперь работает как мне нужно.
Ответить с цитированием
  #8 (permalink)  
Старый 28.09.2017, 22:29
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 401

Сообщение от рони
поменять местами текст и картинку
так тоже работает. Но когда знаешь что есть prependTo, то легче выучить что такое appendTo
Спасибо за помощь!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поменять доктайп на JS Cdelphi78 Events/DOM/Window 1 14.03.2016 12:04
Как можно с помощью скрипта поменять порядок вывода записи? ligisayan jQuery 3 25.06.2015 21:51
Как поменять анимацию у этого слайдера? Гаджи Элементы интерфейса 3 15.09.2014 12:08
Как поменять классы на jquery fa_t jQuery 2 31.05.2014 21:57
Как поменять местами элементы в дереве элемента родителя? rar11 Events/DOM/Window 8 01.04.2009 17:53