У меня есть столик динамически. Также я создал текстовое поле, которое должно отключить все остальные текстовые поля после нажатия пользователем, чтобы ввести текст в одно из них. Я пытаюсь создать кнопку рядом с текстовым полем, на которое я нажал. Мой текущий код показывает кнопку на том же месте. Не имеет значения, какое текстовое поле я нажал на кнопку, всегда отображается рядом с первым текстовым полем. HTML код:
<tr>
<td>#TimeFormat(StartTime,'hh:mm tt')#</td>
<td>#TimeFormat(EndTime,'hh:mm tt')#</td>
<td><input type="text" name="fname" id="fname">
<input type="button" id="test" name="test" value="Save" onClick="testButton()" style="display: none">
</td>
</tr>
Код JQuery:
$(document).ready(function() {
$(":text").keyup(function(e) {
if($(this).val() != '') {
$(":text").not(this).attr('disabled','disabled');
$("#test").show();
} else {
$(":text").removeAttr('disabled');
$("#test").hide();
}
});
});
Я не уверен, почему кнопка появляется только в первом ряду. Моя функция текстового поля работает отлично. Если я нажму в одном текстовом поле, все остальные будут заблокированы. Единственная проблема заключается в том, что моя кнопка создается не рядом с текстовым полем, которое я нажал, а первой. Если кто-нибудь увидит, где мой код взломан, пожалуйста, дайте мне знать. Спасибо.
3 ответа
Это происходит потому, что все кнопки имеют одинаковый идентификатор. Итак, $("#test")
всегда находит первую кнопку:
Вам нужно использовать класс вместо идентификатора, например так:
<input type="button" class="test" value="Save" onClick="testButton()" style="display: none">
Тогда ваше событие должно быть таким:
$(document).ready(function() {
$(":text").keyup(function(e) {
if($(this).val() != '') {
$(":text").not(this).attr('disabled','disabled');
$(this).next(".test").show();
} else {
$(":text").removeAttr('disabled');
$(this).next(".test").hide();
}
});
});
Используйте next()
и prev()
, чтобы найти следующий и предыдущий элемент, например, следующий. Надеюсь, что это поможет вам.
$(".fname").keyup(function (e) {
if ($(this).val() != '') {
$(".fname").not(this).attr('disabled', 'disabled');
$(this).next(".test").show();
} else {
$(".fname").removeAttr('disabled');
$(this).next(".test").hide();
}
});
$(".test").click(function (e) {
alert($(this).prev(".fname").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>#TimeFormat(StartTime,'hh:mm tt')#</td>
<td>#TimeFormat(EndTime,'hh:mm tt')#</td>
<td>
<input type="text" name="fname" class="fname">
<input type="button" class="test" name="test" value="Save" style="display: none">
</td>
</tr>
<tr>
<td>#TimeFormat(StartTime,'hh:mm tt')#</td>
<td>#TimeFormat(EndTime,'hh:mm tt')#</td>
<td>
<input type="text" name="fname" class="fname">
<input type="button" class="test" name="test" value="Save" style="display: none">
</td>
</tr>
</table>
Обновление:
Кнопка:
<input type="button" class="test" name="test"
onclick="testButton(this)" value="Save" style="display: none">
Функция JS
function testButton(btn) {
var test = $(btn).prev('.fname').val();
alert(test);
}
Ответ Azim частично правильный, селектор «следующий» не может быть селектором идентификатора, в противном случае вы выбираете только конкретное текстовое поле с конкретным идентификатором. Правильный путь:
$(this).next("input").show();
Пример: здесь
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.