Question

我创建了一个表单，您可以在其中创建编辑现有博客帖子。表单最初是隐藏的，当您选择“创建帖子”时，它会将表单显示为空白，如果单击“编辑帖子”，它将使用Ajax加载帖子信息并填写空白。问题是，当你在两者之间切换时，一些元素不会被清除并且每次都被替换。这是我的JS脚本：

<!-- Hidden Create / Edit form -->
<div id="news-form" title="" style="display: none;">
    <div id="js_news_message" style="display: none;"></div>
    <form id="news" class="form" action="{URL}/admin/blog" method="post">
        <input type="hidden" name="action" value="">
        <input type="hidden" name="id" value="">
        <p>
            <label for="title">Blog Title</label>
            <input id="title" name="title" class="required" type="text" value="" />
        </p>

        <div>
            <label for="body">Blog Body</label>
            <textarea id="body" name="body" class="tinymce" rows="50" cols="40"></textarea>
        </div>

        <div class="clear"></div>
        <p>
            <a class="button red" id="reset-form" href="javascript:void(0);">Reset Changes</a>
            <input id="submit" type="submit" class="button" style="width: 150px; text-align: center; margin: 10px; float: right;" value="Submit">
        </p>
    </form>
</div>

<script src="{TEMPLATE_URL}/js/mylibs/jquery.form.js"></script>
<script type="text/javascript">

$("#create").click(function() {
        // Reset form elements
        $("input[name=action]").val('create');
        $("input[name=title]").val('');
        $("textarea[name=body]").val('');

        // Show form, and hide any previous messages
        $('#js_news_message').attr('style', 'display: none;');
        $('#news').attr('style', '');
        $('#news-form').attr('title', 'Create News Post');
        $('#news-form').dialog({ modal: true, height: 600, width: 750 });

// ============================================
    // Editing News
    $(".edit").live('click', function(){
        var news_id = $(this).attr('name');
        //alert( news_id );

        // Get our post
        $.post("{BASE_URL}/admin/news", { action : 'getpost', id : news_id },
            function(result){
                if(result !== 0)
                {
                    var obj = jQuery.parseJSON(result);
                    // Reset form elements
                    $("input[name=action]").val('edit');
                    $("input[name=id]").val(news_id);
                    $("input[name=title]").val(obj.title);
                    $("textarea[name=body]").val(obj.body);

                    // Show form, and hide any previous messages
                    $('#js_news_message').attr('style', 'display: none;');
                    $('#news').attr('style', '');
                    $('#news-form').attr('title', 'Edit News Post');
                    $('#news-form').dialog({ modal: true, height: 600, width: 750 });

这不是完整的JS，但你明白了。当用户点击博客帖子旁边的“编辑”按钮时，它会弹出jQuery模态，并且帖子信息已经设置为编辑，当他们点击“创建”时，它会再次调出模态，空白形式。

同样，由于某些原因，有时在编辑和创建之间交换时所有内容都会重置，有时则不会。有人有什么想法吗？

Answer 1

在准备好文件时调用它：

$(document).ready( function() { // your code } );

听起来好像我的文件准备就绪后没有设置......

好的，第二次尝试。它可能没有任何区别，但我总是用引号如

编写attr选择器

$("input[name='example']")

Answer 2

看看这一行：

$.post("{BASE_URL}/admin/news", { action : 'getpost', id : news_id },

我可以看到你收到错误，因为你无法识别javascript那个变量

我认为你应该更好地使用：

var base_url = "{/literal}{BASE_URL}{literal}";

修改行

$.post( base_url + "/admin/news", { action : 'getpost', id : news_id },

Answer 3

将函数传递给.val并清除值

$("textarea[name='body']").val(function(){    
return "";    
});

这里有一个小提琴http://jsfiddle.net/dwqFb/61/

jQuery .val（）或.attr（）无法正常工作

3 个答案: