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);    
        });
    });
}​

我的目标是在双击时使问题标题可编辑。一开始一切都很好，但是例如。如果您编辑第一个问题，然后编辑第二个问题，如果您想再次编辑第一个问题，它将用输入替换第二个跨度[不是预期的第一个]。

请注意，我不想为此使用现成的插件。

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 回答