更改列表中的元素

Question

我希望在單擊Edit_Question按鈕後將「問題：」和「答案：」更改爲文本輸入後面的文本。我不知道做這個工作的好方法。下面是我的代碼有：

<script type="text/javascript"> 
<!-- 
$("li div").hide(); 
$("li h3").click(function(){ 
    $(this).next("div").slideToggle("fast").siblings("div").slideUp("fast"); 
}) 

//--> 
</script> 
<ul class="Question_List"> 

<?php foreach($FAQS as $FAQ) { ?> 

    <li> 
    <h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3> 
      <div> 
      <h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4> 
      <table style='max-width: 250px;'> 
       <tbody> 
         <tr> 

    <td><strong>Pages:</strong><select><option>1</option><option>2</option></select> 
     <td><input type='button' class="Edit_Question" value='edit'/></td> 
     <td><input type='button' class="Delete_Question" value='delete'/></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </li> 

<?php } ?> 

<li><br><input type="button" class="New_Question" value="NEW"/></li> 
</ul> 

Answer 1

只是禁用/啓用文本框和風格殘疾人版本： HTML：

<button id="edit">Edit</button> 
<input id="myinput" type="text" disabled="disabled" value="My Value"/> 

CSS：

input:disabled { 
    background-color:#fff; 
    border:none; 
} 

的JavaScript：

document.getElementById("edit").onclick = function() { 
    document.getElementById("myinput").disabled = ""; 
}; 

Answer 2

只需複製此c頌讚你的頁面而不損壞你的腳本。

<script type="text/javascript"> 
<!-- 

var editBox = false; 

$("li div").hide(); 
$("li h3").click(function(){ 
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast"); 
}); 

$('.Edit_Question').click(function() { 
if(editBox) 
{ 
    $('.edit_area').css({'display':''}); 
    editBox = true; 
} else { 
    $('.edit_area').css({'display':'none'}); 
    editBox = false; 
} 
}); 

//--> 
</script> 
<ul class="Question_List"> 

<?php foreach($FAQS as $i => $FAQ) { ?> 

    <li> 
     <h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3> 
     <div> 
      <h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4> 
      <table style='max-width: 250px;'> 
       <tbody> 
        <tr id="edit_area" style="display:none;"> 
         <td colspan=3><textarea cols=20 rows=5 name="editTextBox"></textarea></td> 
        </tr> 
        <tr> 
         <td><strong>Pages:</strong><select><option>1</option><option>2</option></select> 
         <td><input type='button' class="Edit_Question" value='edit'/></td> 
         <td><input type='button' class="Delete_Question" value='delete'/></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </li> 

<?php } ?> 

<li><br><input type="button" class="New_Question" value="NEW"/></li> 

Answer 3

首先，你在你的<select>頁之後缺少結束</td>標籤。如果您想讓您輕鬆選擇問題和答案的文本，請將它們包裝在一個元素中。在我的例子中，我將它們包裝在一個<span>元素中，並分別給它們分別爲question和answer。

嘗試使用演示：http://jsfiddle.net/v3yN7/

HTML：

<li> 
    <h3><u><strong><i>Question:</i></strong><span class="question">What should I ask?</span></u></h3> 
    <div> 
     <h4><strong><i>Answer:</i></strong><span class="answer">This is a rather short answer</span></h4> 
     <table style='max-width: 250px;'> 
      <tbody> 
       <tr> 

        <td><strong>Pages:</strong><select><option>1</option><option>2</option></select></td> 
        <td><input type='button' class="Edit_Question" value='edit'/></td> 
        <td><input type='button' class="Delete_Question" value='delete'/></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</li> 

的Javascript：

$('.Edit_Question').click(function() { 
    // Find the <li> element the whole clicked thing is wrapped in 
    var $item = $(this).closest('li'); 

    // Select all question and answer wrappers 
    $item.find('.question,.answer').each(function() { 
     var $this = $(this); 

     // Get the question/answer text 
     var txt = $this.text(); 

     // Empty the wrapper and replace them with an input box 
     $this.empty().append($('<input type="text" />').val(txt)); 
    }); 
}); 

我以爲你只是想編輯一個簡單的輸入框，但它可以很方便地改如果需要，可以使用<textarea>。

至於接下來會發生什麼，我會留給你。 :)