1

次のコードを作成しました。

http://jsfiddle.net/3Zxx9/

HTML:

<div class="question">
    <div class="questionLabel">
        <span class="questionTitle">How old are you?</span>
        <span class="hideCollapseQuestion">x</span>
    </div>
    <div class="questionChoices">
        <div class="questionChoice">
            <div class="questionLetter">A</div>
            <div class="questionText">Over 3</div>
        </div>
        <div class="questionChoice">
            <div class="questionLetter">A</div>
            <div class="questionText">Under 69</div>
        </div>
    </div>
</div>
<div class="question">
    <div class="questionLabel">
        <span class="questionTitle">Wat is your name?</span>
        <span class="hideCollapseQuestion">x</span>
    </div>
    <div class="questionChoices">
        <div class="questionChoice">
            <div class="questionLetter">A</div>
            <div class="questionText">Ahmed</div>
        </div>
        <div class="questionChoice">
            <div class="questionLetter">A</div>
            <div class="questionText">John</div>
        </div>
    </div>
</div>​

CSS:

.question {
    background: #ccc;
    width: 100%;
    display: block;
}

.questionTitle {
    font-size: 20px;
    padding: 2px;
}

.questionChoices {
    padding-left: 20px;
}

.questionChoice {
    display: table;
    padding: 2px;
}

.questionChoice > div {
    display: table-cell;
}

.questionLetter {
    font-size: 18px;
    font-weight: bold;
    color: white;
    padding: 5px;
    background: #1b5e30;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.questionText {
    padding-left: 10px;
}

.hideCollapseQuestion {
    float: right;
}​

JS:

$(".hideCollapseQuestion").each(function()
{
    $span = $(this);
    $(this).click(function()
    {
        var $questionChoices = $(this).parent().parent().children(".questionChoices");

        if ($questionChoices.css("display") === "none")
            $questionChoices.fadeIn();
        else
            $questionChoices.fadeOut();
    });
});

$(".questionTitle").each(function()
{
    $(this).dblclick(function()
    {
        onQuestionTitleChange($(this));
    });
});

function onQuestionTitleChange($title)
{
    $currentTitle = $title.text();
    $newInputField = $('<input type="text" value="' + $currentTitle + '" />');
    $title.replaceWith($newInputField);
    $newInputField.focus();

    $newInputField.blur(function()
    {
        $oldSpan = $('<span class="questionTitle">' + $newInputField.val() + '</span>');
        $newInputField.replaceWith($oldSpan);

        $oldSpan.dblclick(function()
        {
            onQuestionTitleChange($oldSpan);    
        });
    });
}​

私の目的は、ダブルクリックで質問のタイトルを編集できるようにすることです。最初はすべて問題ありませんが、たとえば。最初の質問を編集してから2番目の質問を編集し、最初の質問を再度編集する場合は、2番目のスパンを入力に置き換えます[期待どおりの最初のものではありません]。

そのために既製のプラグインを使用したくないことに注意してください。

4

2 に答える 2

2

単純に、最後の行で次のことを行う必要があります。

交換

$oldSpan.dblclick(function()
        {
            onQuestionTitleChange($oldSpan);    
        });

と

$oldSpan.dblclick(function()
                        {
                            onQuestionTitleChange($(this));    
                        });

実際の例を見てください: http://jsfiddle.net/saidbakr/3Zxx9/4/

于 2012-11-25T13:12:32.493 に答える
1

dbl-click イベントを設定した Question-Title を置き換えています。それは問題ありませんが、jQuery の '.on' 関数を適切に使用することをお勧めします。

$(".question").on('dblclick', '.questionTitle', function()
{
    onQuestionTitleChange($(this));
});

その後、イベント ハンドラーをさらに下にリセットする必要はありません。
実施例

また、フィールドを何度も再作成するのではなく、フィールドの可視性を変更することをお勧めします...

于 2012-11-25T13:08:05.480 に答える