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

首先，您在页面</td>之后缺少结束<select>标记。如果您想轻松选择问题和答案的文本，请将它们包含在元素中。在我的示例中，我将它们包装在<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>。

关于接下来会发生什么，我会留给你。：）

Answer 3

只需将此代码复制到您的页面而不会损坏您的脚本。

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

更改列表中的元素

3 个答案: