Question

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

有一个小提琴

修改道歉，我在我的问题中不太清楚。我的模态工作正常，我的问题如下：当用户创建一个选项卡时，它们会显示三个文本框。当他们在一个选项卡上的文本框中输入文本时，内部更新文本与他们在标题，字幕和内容中输入的内容一样，类似于输入“页面标题”文本框的文本如何重命名实时选项卡。当用户更改选项卡时，文本应更新为当前活动选项卡中文本框中的内容。

我的尝试：

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

Answer 1

在这里：提供您的增强功能的更新小提琴。 :) 这假设您没有更改元素ID的命名约定。

// 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”值，因为它们会在用户输入时动态更新。

Answer 2

试试这个：

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

DEMO

Answer 3

如果pageTitle（etcetera）是您要写入的元素的ID：

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

Btw：这假设在此之前，您捕获所需的值并将其放在变量pageTitle（等等）中。

Answer 4

您可以使用jQuery的.change()功能

$('.target').change(function() {
    alert('Handler for .change() called.');
});

对于你的问题，它将是这样的：

$('.modal-body #pageTitle').change(function() {
    $(select the element where the content needs to be updated).html(<h1>+$('.modal-body #pageTitle').text()+</h1>);
});

使用jQuery实时更新文本

4 个答案: