关于文本输入改变回声到最接近的H3

时间:2014-06-14 07:24:58

标签: jquery

JSFiddle:http://jsfiddle.net/JF7PD/6/

<div class='group'>
    <h3>
        <span style="z-index:99999;position:absolute;margin-left:418px;top:0px"><a href="#" class="removeclass"><span class="ui-iconred ui-icon-circle-close"></span></a></span>
        <a href='#'><span id="accordionheadder">Column 1</span></a>
    </h3>
    <div>
        <div class='group'>
            <div class="boo">
                <span id="CoulmTitle">Column 1</span><br/>
                <div class="row">
                    <input type="text" name="mytext[]" id="Title_1" value="Column Title"></input>
                    <label for="username">Please enter the title for the data under this column</label>
                </div>
                <div class="row">
                    <input type="text" name="mytext[]" id="ColumWidth_1" value="Column Width (px)"></input>
                    <label for="username">Please enter initial (page load) width for this column</label>
                </div>
            </div>
            <div class="row">
                <div class="dropdown">
                    <select id="ColumInputType_1" name="age">
                        <option>
                            &nbsp;&nbsp;&nbsp;&nbsp;Column Input Type
                        </option>
                        <option>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Simple Text Input
                        </option>
                        <option>
                            &nbsp;&nbsp;Descriptive Text Input
                        </option>
                        <option> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Check/Tick</option>
                        <option>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Progress Bar
                        </option>
                        <option>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date Picker
                        </option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

我的页面上有几个这样的内容以及<input type="text" name="mytext[]" id="field_1" value="Column Title"></input>中输入的内容我希望这可以作为新的列标题回显。

这是因为它是可排序的,所以如果手风琴被扣紧,那么该人知道哪一个能够以正确的顺序排序,而无需打开知道哪一个是哪个。

最诚挚的问候, 添

1 个答案:

答案 0 :(得分:0)

Demo Fiddle

$(document).on('keyup', 'input[id^="ColumnTitle"]', function () {
    var value = this.value.length > 0 ? true : false;
    if (value) {
        $(this).closest('[role="tabpanel"]').prev().find('#accordionheadder').text(this.value);
        $(this).parents('.boo').find('[id^="CoulmTitle"]').text(this.value);
    }

});
相关问题