jQuery的元素跳躍在DBLCLICK /模糊

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

我的目標是通過雙擊可以編輯問題標題。一開始一切都好，但是例如。如果你編輯第一個問題，那麼編輯第二個問題，如果你想再次編輯第一個問題，它用輸入[不是第一個預期的]替換第二個跨度。

請注意，我不想使用ready插件。

來源

2012-11-25 Adrian Adamczyk

只要你必須做的最後一個行follwoing：

更換

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

與

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

看在工作實例： http://jsfiddle.net/saidbakr/3Zxx9/4/

來源

2012-11-25 13:12:32 SaidbakR

這是正確的，謝謝。現在我看到我已經第一次完成了相同的綁定dblClick :) –

@Visher不要緊，不用擔心，歡迎您！ – SaidbakR

即使這是錯誤，請在我的答案中查看我的建議以改進您的代碼。 – nirazul

您正在替換您設置了dbl-click事件的問題標題。這是確定的，但更好的方式是正確使用jQuery的「對」功能：

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

那麼你不必重新設置事件處理程序進一步下跌。
working example

我也建議你只是改變字段的可見性，而不是一遍遍重現他們......

來源

2012-11-25 13:08:05 nirazul

歐凱，我會:)謝謝 –

jQuery的元素跳躍在DBLCLICK /模糊

回答

相關問題