Как поменять местами
Здравствуйте!
Есть две радио кнопки "Слева" и "Справа". При клике на кнопки должно переставляться изображение слева или справа относительно текста. Подскажите, можно как это безболезненно реализовать. Текст приходит из другого импута через .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);
});
});
Но понимаю что что то не то я делаю. Вот пришёл на форум за советами и подсказками. |
Можно добавлять к родителю 'positMansard' - сlass вроде такого:
.class span{ float: left} .class img {float:right} Элементы выпадут из потока и поменяются местами. Хотя это на любителя вариант, но вполне возможно так делать и проще, мне кажется. |
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>
|
рони, СПАСИБО!
Работает. Я все новые для меня функции нашёл в документации, но мне нужно теперь время чтобы их разобрать. Можно ли уточнить, как мне картинку позиционировать согласно названий кнопок. То есть чтобы при клике на "Слева" - слева находилась картинка. |
заменить
appendTo на prependTo |
Цитата:
|
j0hnik, СПАСИБО - теперь работает как мне нужно.
|
Цитата:
Спасибо за помощь! |
| Часовой пояс GMT +3, время: 18:58. |