Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как поменять местами (https://javascript.ru/forum/misc/70734-kak-pomenyat-mestami.html)

MC-XOBAHCK 28.09.2017 21:48

Как поменять местами
 
Здравствуйте!
Есть две радио кнопки "Слева" и "Справа". При клике на кнопки должно переставляться изображение слева или справа относительно текста.
Подскажите, можно как это безболезненно реализовать. Текст приходит из другого импута через .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);
    });
});

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

void() 28.09.2017 22:00

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

рони 28.09.2017 22:06

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>

MC-XOBAHCK 28.09.2017 23:02

рони, СПАСИБО!
Работает. Я все новые для меня функции нашёл в документации, но мне нужно теперь время чтобы их разобрать.
Можно ли уточнить, как мне картинку позиционировать согласно названий кнопок. То есть чтобы при клике на "Слева" - слева находилась картинка.

j0hnik 28.09.2017 23:08

заменить
appendTo

на
prependTo

рони 28.09.2017 23:15

Цитата:

Сообщение от MC-XOBAHCK
То есть чтобы при клике на "Слева" - слева находилась картинка.

строка 27 -- поменять местами текст и картинку

MC-XOBAHCK 28.09.2017 23:16

j0hnik, СПАСИБО - теперь работает как мне нужно.

MC-XOBAHCK 28.09.2017 23:29

Цитата:

Сообщение от рони
поменять местами текст и картинку

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


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