3

最近、jQuery を使用してプロジェクトを行っていますが、問題が発生しました。基本的な考え方は、タブのテキスト ボックスにコンテンツを入力すると、入力に応じて div 内のテキストが変化し、新しいタブに移動すると、テキスト ボックス内のテキストに変化するように、いくつかの JS コードを作成することです。そこの。説明するのはかなり難しいので、http://jsfiddle.net/BenedictLewis/bNnpT/にフィドルがあります。

編集： 申し訳ありませんが、私の質問はかなり不明確でした。私の問題は次のとおりです。ユーザーがタブを作成すると、3 つのテキスト ボックスが表示されます。1 つのタブのテキスト ボックスにテキストを入力すると、「ページ タイトル」テキスト ボックスに入力されたテキストがタブの名前をライブに変更するのと同様に、タイトル、サブタイトル、およびコンテンツに入力した内容で内部のテキストが更新されます。ユーザーがタブを変更すると、テキストは現在アクティブなタブのテキスト ボックスの内容に更新されます。

私が試したこと：

$(".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

.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 に答える
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（etcetera）に入れることを前提としています。

于 2013-04-12T10:32:58.417 に答える