3

我最近一直在用 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>');
4

4 回答 4

2

在这里你去：一个更新的小提琴提供你的增强。:) 这假设您没有更改元素 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”值的逻辑，因为它们会在用户键入时即时更新。

于 2013-04-12T15:09:57.757 回答
0

试试这个：

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

演示

于 2013-04-12T10:31:41.687 回答
0

如果 pageTitle (etcetera) 是您要写入的元素的 ID：

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

顺便说一句：这假设在此之前，您捕获了想要的值并将其放入变量 pageTitle （等等）中。

于 2013-04-12T10:32:58.417 回答
0

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

$('.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>);
});
于 2013-04-12T13:26:16.140 回答