jquery – 在编辑超链接单击时将标签更改为文本框

发布时间:2019-05-15 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了jquery – 在编辑超链接单击时将标签更改为文本框脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是 ruby on rails和twitter bootstrap的新手.如果我的问题听起来很愚蠢,请接受我的道歉.
我正在使用twitter bootstrap进行我的网站设计.我一直在尝试使用bootstrap将标签更改为文本框,使用超链接按钮单击.
<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Saghir<i class="icon-star"></i></p></label>
    <div class="controls">
        <a href="#">Edit</a>
    </div>

但我无法这样做,我应该使用jquery这样做,或者我可以使用bootstrap.
请指出正确的方向.提前致谢

编辑
代码用超链接更新(它也可以是按钮).就像当我点击“编辑”超链接时,我的标签应该显示可以使用bootstrap的占位符属性使用的内容“Saghir”.我可以提交表单来更新数据库的值.

解决方法

正如Chris所说,Bootstrap不提供此功能,因为它是一个前端框架.你可以使用jQuery来实现这一目标.但是,您需要在元素中添加一些自定义ID或类,以确保只选择所需的元素.您可以执行以下操作:

HTML

<div class="control-group">
    <label for="name" class="control-label">
        <p class="text-info">Saghir<i class="icon-star"></i></p>
    </label>
    <input type="text" class="edit-input" />
    <div class="controls">
        <a class="edit" href="#">Edit</a>
    </div>
</div>

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();
    });
});

CSS

.edit-input {
    display:none;
}

这是一个工作JSFiddle供您参考.

总结

以上是脚本之家为你收集整理的jquery – 在编辑超链接单击时将标签更改为文本框全部内容,希望文章能够帮你解决jquery – 在编辑超链接单击时将标签更改为文本框所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: