在编辑超链接上单击将标签更改为文本框 [英] Change Label to Textbox on edit hyperlink click

问题描述

我是红宝石，不熟悉Rails和Twitter引导程序.如果我的问题听起来很愚蠢，请接受我的道歉. 我在网站设计中使用了twitter bootstrap.我一直在尝试使用引导程序通过单击超链接按钮将我的标签更改为文本框.

I am new to ruby on rails and twitter bootstrap. Accept my apologize if my question sound dumb. I am using twitter bootstrap for my site design. I have been trying to use bootstrap to change my label to textbox using hyperlink button click.

<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这样做还是可以使用引导程序. 请指出正确的方向.预先感谢

but I am unable to do so, should I use jquery to do so, or I can use bootstrap for that. Please point me to right direction. Thanks in advance

修改 用超链接更新代码(也可以是按钮).就像当我单击编辑"超链接时，我的标签应显示内容"Saghir"，可以使用引导程序的占位符属性使用该内容.我可以提交表单以将值更新到数据库.

Edit Code is updated with hyperlink(it could be button too). it is like, when I click on "Edit" hyperlink my label should show content "Saghir" that can be used using placeholder attribute of bootstrap. I can submit form to update values to database.

推荐答案

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

As Chris said, Bootstrap does not provide this functionality as it is a front-end framework. you can use jQuery to achieve this. Though, you'll need to add some custom id's or classes to your elements to make sure you are only selecting the required elements. You can do something like the following:

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 供您参考.

Here is a working JSFiddle for your reference.

这篇关于在编辑超链接上单击将标签更改为文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！