更改列表中的元素

如何解决更改列表中的元素

| 我想在单击“编辑问题”按钮后，将“问题：”和“答案：”之后的文本更改为文本输入。我不知道完成这项工作的好方法。这是我的代码：

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

    

解决方法

        只需禁用/启用文本框并设置禁用版本的样式即可： 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 = \"\";
};

    ,        首先，页面

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

。 至于接下来发生的事情，我将由您自己决定。 :)     ,        只需将此代码复制到您的页面，而无需破坏脚本。

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