Вставка текста в зависимости от выбранной радиокнопки
Добрый день. Что делаю не так? Пытаюсь при клике по полю div вычислить координаты и вставить в тот input, который связан с радиокнопкой.
function getCurCoordsInsideRect(e) {
var x = e.offsetX == undefined ? e.layerX : e.offsetX;
var y = e.offsetY == undefined ? e.layerY : e.offsetY;
jQuery("input[name=radio]:radio").change(function() {
var checkid = (jQuery(this).attr('id'));
var inputid = checkid.replace("radio-", "#input-");
if (jQuery("radio-1").prop('checked')) {
jQuery("input-1").val(inputid);
alert(x +'x'+ y);
}
})
}
function getElement(e, element) {
getCurCoordsInsideRect(e, element);
}
<div id="div-1">
<input type="radio" name="radio" id="radio-1" value="">
<input type="text" name="input-1" id="input-1" value="1">
</div>
<div id="div-2">
<input type="radio" name="radio" id="radio-2" value="">
<input type="text" name="input-2" id="input-2" value="2">
</div>
|
Цитата:
|
Это так, поэтому и обращаюсь к форумчанам.
|
Янковиц,
не понимаю вашего описания |
Я получаю координаты при клике по некоему div:
function getCurCoordsInsideRect(e) {
var x = e.offsetX == undefined ? e.layerX : e.offsetX;
var y = e.offsetY == undefined ? e.layerY : e.offsetY;
alert(x +'x'+ y);
}
function getElement(e, element) {
getCurCoordsInsideRect(e, element);
}
Алерт выводит, все верно. Но теперь мне нужно прикрутить зависимость. Если активирована радио кнопка с id="radio-1", то вставляем координаты в поле input с id="input-1". И так далее... |
Янковиц,
а если не одна не активирована? |
если не активированно, то и никуда не выводятся координаты
|
Янковиц,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".hot").on("click", function(event) {
var parent = $('[name="radio"]:checked').parents("div");
$('[name^="input"]', parent).val(event.pageX + " : "+event.pageY)
})
});
</script>
</head>
<body>
<div class="hot">click me</div>
<div id="div-1">
<input type="radio" name="radio" id="radio-1" value="" >
<input type="text" name="input-1" id="input-1" value="1">
</div>
<div id="div-2">
<input type="radio" name="radio" id="radio-2" value="">
<input type="text" name="input-2" id="input-2" value="2">
</div>
</body>
</html>
|
Спасибо большое. Можно последний вопрос...
Почему у меня браузер ругается на приведенный код: Uncaught TypeError: $ is not a function |
Янковиц,
скорее всего у вас уже нет $ и вам нужно все $ заменить на jQuery. |
Совсем что-то взгрустнулось :cray: При переносе не работает
|
Цитата:
сначала jquery (одна версия на всю страницу) потом все плагины jquery потом весь код использующий jquery потом если нужно jQuery.noConflict(); и только потом все остальные скрипты |
Кажется я понял в чем причина. У меня чекбоксы и блок откуда берутся координаты подгружаются позже загрузки скрипта через ajax. При вставке обычным способом, все пашет :) Возможно в этом причина отказа работы? Есть ли в js какие-то особенности взаимодействия с такими html элементами?
|
Цитата:
было
$(".hot").on("click", function(event) {
будет jQuery("предок").on("click", ".hot",function(event) { или переносить код в ajax -- добавили элементы, затем их проинициализировали |
Решил отправить код в ajax. Странно, но теперь координаты добавляет во все инпуты
|
Может лучше получить id родительского блока, а потом в нем же найти inpyt type=text и вставить?
Хмм... вывожу через alert и выдает: [object Object] |
Янковиц,
сложно не зная вашу структуру но попробуйте так var parent = $('[name="radio"]:checked').parents("div:first"); |
| Часовой пояс GMT +3, время: 01:51. |