javascript - 从 JQuery 动态选择并填充输入值

Question

我有一个像这样的jquery代码:

let $options = JSON.parse(data.options);
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
  $('#' + item ).val($options[item] );
});

我想用 $options 中的数据填充 $keys 中 id 中的所有输入值。但它不起作用。但如果我像这样手动执行它，它会起作用:

      $("#title").val($options.title);
      $("#type").val($options.type);
      $("#location").val($options.location);

我确定问题出在这段代码中: $('#' + item ) 我尝试了很多方法，但似乎不起作用。那么有什么办法可以解决这个问题吗？

这是我的 HTML:

<div class="modal fade" id="widget_modal" tabindex="-1" role="dialog" aria-labelledby="AddUserModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="widget_form" class="form-horizontal" method="post" enctype="multipart/form-data" action="/admin/widgets/store">
            <input type="hidden" id="csrf" name="csrf_token">
            <input type="hidden" name="id" id="id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Add Widget
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            &times;
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-lg-4 col-form-label" for="title">
                            Widget Title *
                        </label>
                        <div class="col-lg-8">
                            <input id="title" name="title" class="form-control" autofocus>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-lg-4 col-form-label" for="type">
                            Type *
                        </label>
                        <div class="col-lg-8">
                            <select class="custom-select form-control" id="type" name="type">
                                <option value="">Select Widget Type</option>
                                <option value="popular-post">Popular Post</option>
                                <option value="recent-post">Recent Post</option>
                                <option value="featured-post">Featured Post</option>
                                <option value="post-tabs">Post Tabs</option>
                                <option value="post-carousel">Post Carousel</option>
                                <option value="tags">Tags</option>
                                <option value="archive">Archive</option>
                                <option value="calender">Calendar</option>
                                <option value="blockquote">Blockquote</option>
                                <option value="mini-gallery">Mini Gallery</option>
                                <option value="list">List</option>
                                <option value="search">Search</option>
                                <option value="testimonials">Testimonial Carousel</option>
                                <option value="social-media">Social Media</option>
                                <option value="contact-us">Contact Us</option>
                                <option value="flickr">Flickr Feed</option>
                                <option value="instagram-feed">Instagram Feed</option>
                                <option value="recent-tweets">Recent Tweets</option>
                                <option value="video">Video</option>
                            </select>
                        </div>
                    </div>
                    <div id="post_div" class="form-group row">
                        <label class="col-lg-4 col-form-label" for="post_number">
                            Number of Post
                        </label>
                        <div class="col-lg-8">
                            <input id="post_number" name="post_number" class="form-control" autofocus>
                        </div>
                    </div>
                    <div id="testimonial_div" class="form-group row">
                        <label class="col-lg-4 col-form-label" for="testimonial_number">
                            Number of Testimonial
                        </label>
                        <div class="col-lg-8">
                            <input id="testimonial_number" name="testimonial_number" class="form-control" autofocus>
                        </div>
                    </div>
                    <div id="galleries_div" class="form-group row">
                        <label class="col-lg-4 col-form-label" for="image_number">
                            Number of Image
                        </label>
                        <div class="col-lg-8">
                            <input id="image_number" name="image_number" class="form-control" autofocus>
                        </div>
                    </div>
                    <div id="video_div" class="form-group row">
                        <label class="col-lg-4 col-form-label" for="video_url">
                            Video URL
                        </label>
                        <div class="col-lg-8">
                            <input id="video_url" name="video_url" class="form-control" autofocus>
                        </div>
                    </div>
                    <div id="blockquote_div">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label" for="blockquote_author">
                                Author
                            </label>
                            <div class="col-lg-8">
                                <input id="blockquote_author" name="blockquote_author" class="form-control" autofocus>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label" for="blockquote_content">
                                Quote
                            </label>
                            <div class="col-lg-8">
                                <input id="blockquote_content" name="blockquote_content" class="form-control" autofocus>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-lg-4 col-form-label" for="location">
                            Location *
                        </label>
                        <div class="col-lg-8">
                            <select class="custom-select form-control" id="location" name="location">
                                <option value="">Select Position</option>
                                    <option value="left">Left</option>
                                    <option value="right">Right</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button id="submit_button" type="submit" class="btn btn-primary">
                        Save changes
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

这是我的完整编辑脚本:

 $(document).on('click', 'a.edit', function (event) {
            event.preventDefault();
            let $id = $(this).closest('tr').data('id');
            let url = "/admin/widgets/" + $id + "/edit";

            $.post(url,{ id: $id, csrf_token: $csrf }).done(function (data) {
                console.log(data.options);

                let $options = JSON.parse(data.options);

                var post = ["popular-post", "recent-post", "featured-post", "post-tabs","post-carousel"];

                if (post.includes($options.type)){
                    post_div.show();
                    testimonial_div.hide();
                    galleries_div.hide();
                    video_div.hide();
                    blockquote_div.hide();
                }else if($options.type === 'testimonials'){
                    post_div.hide();
                    testimonial_div.show();
                    galleries_div.hide();
                    video_div.hide();
                    blockquote_div.hide();
                }else if($options.type === 'mini-gallery'){
                    post_div.hide();
                    testimonial_div.hide();
                    galleries_div.show();
                    video_div.hide();
                    blockquote_div.hide();
                }else if($options.type === 'video'){
                    post_div.hide();
                    testimonial_div.hide();
                    galleries_div.hide();
                    video_div.show();
                    blockquote_div.hide();
                }else if($options.type === 'blockquote'){
                    post_div.hide();
                    testimonial_div.hide();
                    galleries_div.hide();
                    video_div.hide();
                    blockquote_div.show();
                }else{
                    post_div.hide();
                    testimonial_div.hide();
                    galleries_div.hide();
                    video_div.hide();
                    blockquote_div.hide();
                }

                page_modal.modal("show");

                let $keys = Object.keys($options);
                $keys.forEach(function (item,index, array) {
                    console.log($('#' + item));
                    $('form [name="' + item +'"]').val($options[item] );
                });

                validator.resetForm();
                $(".modal-title").text("Edit Widget");
                page_modal.find("form")[0].reset();
                $("#id").val(data.id);
                $("#csrf").val($csrf);
                submit_button.html("Update Widget");
            });
        });

这是 console.log('item : ' + item); 提供的屏幕截图和 console.log('$options[item] =' + $options[item] );

Answer 1

只需使用表单字段的 name 属性在 jQuery 中访问它们即可。
当然，假设每个选项键名与表单字段名称相同。

通过使用方括号[]，然后使用属性名称和可选的属性值，您可以使用特定值来定位特定元素。如需更多阅读，请选择:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

+function() {
  let data = {
     options : '{"title":"Posts Tab","type":"post-tabs","post_number":"2","location":"right"}'   
  };
  let $options = JSON.parse(data.options);
  let $keys = Object.keys($options);
  $keys.forEach(function (item,index, array) {
    $('form [name="' + item +'"]').val($options[item] );
  })
}();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="widget_modal" tabindex="-1" role="dialog" aria-labelledby="AddUserModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="widget_form" class="form-horizontal" method="post" enctype="multipart/form-data" action="/admin/widgets/store">
            <input type="hidden" id="csrf" name="csrf_token">
            <input type="hidden" name="id" id="id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Add Widget
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            &times;
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-lg-4 col-form-label" for="title">
                            Widget Title *
                        </label>
                        <div class="col-lg-8">
                            <input id="title" name="title" class="form-control" autofocus>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-lg-4 col-form-label" for="type">
                            Type *
                        </label>
                        <div class="col-lg-8">
                            <select class="custom-select form-control" id="type" name="type">
                                <option value="">Select Widget Type</option>
                                <option value="popular-post">Popular Post</option>
                                <option value="recent-post">Recent Post</option>
                                <option value="featured-post">Featured Post</option>
                                <option value="post-tabs">Post Tabs</option>
                                <option value="post-carousel">Post Carousel</option>
                                <option value="tags">Tags</option>
                                <option value="archive">Archive</option>
                                <option value="calender">Calendar</option>
                                <option value="blockquote">Blockquote</option>
                                <option value="mini-gallery">Mini Gallery</option>
                                <option value="list">List</option>
                                <option value="search">Search</option>
                                <option value="testimonials">Testimonial Carousel</option>
                                <option value="social-media">Social Media</option>
                                <option value="contact-us">Contact Us</option>
                                <option value="flickr">Flickr Feed</option>
                                <option value="instagram-feed">Instagram Feed</option>
                                <option value="recent-tweets">Recent Tweets</option>
                                <option value="video">Video</option>
                            </select>
                        </div>
                    </div>
                    <div id="post_div" class="form-group row">
                        <label class="col-lg-4 col-form-label" for="post_number">
                            Number of Post
                        </label>
                        <div class="col-lg-8">
                            <input id="post_number" name="post_number" class="form-control" autofocus>
                        </div>
                    </div>
                    <div id="testimonial_div" class="form-group row">
                        <label class="col-lg-4 col-form-label" for="testimonial_number">
                            Number of Testimonial
                        </label>
                        <div class="col-lg-8">
                            <input id="testimonial_number" name="testimonial_number" class="form-control" autofocus>
                        </div>
                    </div>
                    <div id="galleries_div" class="form-group row">
                        <label class="col-lg-4 col-form-label" for="image_number">
                            Number of Image
                        </label>
                        <div class="col-lg-8">
                            <input id="image_number" name="image_number" class="form-control" autofocus>
                        </div>
                    </div>
                    <div id="video_div" class="form-group row">
                        <label class="col-lg-4 col-form-label" for="video_url">
                            Video URL
                        </label>
                        <div class="col-lg-8">
                            <input id="video_url" name="video_url" class="form-control" autofocus>
                        </div>
                    </div>
                    <div id="blockquote_div">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label" for="blockquote_author">
                                Author
                            </label>
                            <div class="col-lg-8">
                                <input id="blockquote_author" name="blockquote_author" class="form-control" autofocus>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label" for="blockquote_content">
                                Quote
                            </label>
                            <div class="col-lg-8">
                                <input id="blockquote_content" name="blockquote_content" class="form-control" autofocus>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-lg-4 col-form-label" for="location">
                            Location *
                        </label>
                        <div class="col-lg-8">
                            <select class="custom-select form-control" id="location" name="location">
                                <option value="">Select Position</option>
                                    <option value="left">Left</option>
                                    <option value="right">Right</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button id="submit_button" type="submit" class="btn btn-primary">
                        Save changes
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>