这是通过单击标签来更改标签值的小提琴。
但是我不想在单击编辑(href)时执行此操作
我只想单击名称并将其更改为文本框,当我将鼠标放在外面时,它应该变回标签
我该怎么做?
这是我的jquery代码
$(document).ready(function() {
$('a.edit').click(function () {
var dad = $(this).parent().parent();
dad.find('label').hide();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
});
这样的事情怎么样。演示
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
$(this).siblings('.edit-input').show();
});
$('.edit-input').focusout(function() {
$(this).hide();
$(this).siblings('.control-label').text($(this).val()).show();
});
});
你可以用这个修改版的小提琴试试:
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
var dad = $(this).parent();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
不过,它不会设置之前标签中的默认值。
只需将点击功能的目标从:
$('a.edit').click(function () {
自
$('.text-info').click(function () {
如果您希望在鼠标退出时隐藏输入,而不是在外部单击时隐藏输入,也可以添加悬停功能。例如:
$('input[type=text]').hover(function () {
}, function () {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
这是你调整的小提琴。