使用jQuery更新文本 [英] Updating text live with jQuery

问题描述

我最近一直在用jQuery做项目，我遇到了一个问题。基本思想是创建一些JS代码，以便当您在选项卡上的文本框中输入内容时，div中的文本会随着您的键入而改变，当您移动到新的选项卡时，它将更改为文本框内的文本那里。这是很难解释，所以有一个小调在 http://jsfiddle.net/BenedictLewis/bNnpT/

I have been doing a project with jQuery recently and I have hit an issue. The basic idea is to create some JS code so that as you enter content into a text box on a tab, the text inside a div changes as you type, and when you move to a new tab it changes to the text inside the text box there. It is quite hard to explain so there is a fiddle at http://jsfiddle.net/BenedictLewis/bNnpT/

编辑：
抱歉，我的问题不太清楚。我有模态工作罚款，我的问题如下：当用户创建一个选项卡，他们呈现三个文本框。当他们在一个选项卡上的文本框中输入文本时，文本内部的更新与其输入到标题，字幕和内容中的内容类似，类似于输入到页面标题文本框中的文本如何重命名选项卡。

Apologies, I was quite unclear in my question. I have the modal working fine, my problem is as follows: When a user creates a tab they are presented with three text boxes. As they enter text into the text boxes on one tab the text inside updates live with what they entered into Title, Subtitle and Content, similar to how text entered into the "Page Title" text box renames the tab live. When the user changes tab, the text should update to what is in the text boxes in the currently active tab.

我尝试过的内容：

$(".modal-body #pageTitle").html('<h1>' + pageTitle + '</h1>');
$(".modal-body #pageSubtitle").html('<h2>' + pageSubtitle + '</h2>');
$(".modal-body #pageContent").html('<p>' + pageContent + '</p>');

推荐答案

。 :)
这假设你不改变你的元素的id的命名约定。

Here you go: An updated fiddle with your enhancements provided. :) This assumes you aren't changing your naming conventions on your elements' ids.

// Newly added code.
// Automatically update the iphone display when 
// the user types.
$('#tabContent').on('keyup', 'input[id^="page"], textarea[id^="page"]', function () {
    var _thisId = $(this).attr('id');

    // Parse out the section from the id: (e.g. Title from pageTitle_tab1)
    // and lowercase it to match the naming conventions in this document.
    _thisId = _thisId.substring(4, _thisId.indexOf('_')).toLowerCase();

    // Only 1 preview element so just modify it's html.
    // _thisId will be title|subtitle|content
    $('#' + _thisId + 'Preview').html('<h1>' + $(this).val() + '</h1>');
});

// Generic handler for all tabs, except the first "add tab"
$('#tabHeaders').on('click', 'li:not(:first-child)', function () {
    var index = $(this).find('a').attr('href').split('#tab')[1];

    // index is the tab number, grab our iphone divs and
    // iterate through each one.
    $('div#iphone-frame div[id$="Preview"]').each(function (idx, el) {
        // The next two lines determine which #page[text field]_tab[index]
        // input to grab our text value from.
        var whichId = $(this).attr('id').split('Preview')[0];
        whichId = whichId.charAt(0).toUpperCase() + whichId.slice(1);

        // Get the text value and set it to the corresponding iphone display.
        var textVal = $('#page' + whichId + '_tab' + index).val();
        $(this).html('<h1>' + textVal + '</h1>');
    });
});
// End newly added code

http://jsfiddle.net/u7S5P/31/

这样你不需要逻辑来在打开预览时更改iphone值，因为它们在用户键入时即时更新。

This way you wont need the logic to change the "iphone" values when opening the preview as they are updated on the fly while the user types.

这篇关于使用jQuery更新文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！