如何在jquery中附加php代码以显示带有数组的值

分解每个部分，使其模块化，这样就很容易扩展。在PHP中这样做：

$categories_data = "";
foreach($categories as $category) { 
     $categories_data .= '<div class="radio-inline">';
     $categories_data .= '<label style="font-weight:normal;">';
     $categories_data .= '<input class="category" id = "'.$category['id'].'" type="radio" onclick="get_sub_category("'.$category['id'].'",0)" name="category_id" ';
     if ($action == 'edit' && $detail[0]['category_id'] == $category['id']) {  
         $categories_data .= ' checked="checked" '; 
     }
     $categories_data .= 'value="'.$category['id'].'">';
     $categories_data .= ucwords(strtolower($category['name']));
     $categories_data .= '</label></div>';
}

$cat_item_id = "";
if( isset($detail[0]['category_item_id']) ) {
    $cat_item_id = $detail[0]['category_item_id'];
}

在您的JAVASCRIPT中，删除模板、变量等，然后在正确替换后附加：

var _categories = '<?php echo $categories_data; ?>';
var _cat_item_id = '<?php echo $cat_item_id ?>';
// Your template 
var _template = '<hr>'n'
             <table class="append-group table">'n'
               <tr>'n'
                 <td colspan='4'>'n'
                   <div class="form-group">'n'
                      <label class="">'n'
                         Select Category<span id="load"></span>'n'
                      </label>'n'
                      {{categories}}'n'
                   </div>'n'
                     <input type="hidden" id="selected_item" value="{{cat_item_id}}">'n'
                  </td>'n'
                </tr>'n'
             </table>';

// Marge with original values and append
var _table = _template.replace(/{{categories}}/, _categories)
                      .replace(/{{cat_item_id}}/, _cat_item_id);
$(wrapper).append( _table );

要全局访问categories和item_id，您可以使用window._categories = '<?php echo $categories_data; ?>';和window._cat_item_id = '<?php echo $cat_item_id ?>';，这样，如果您有外部js文件（custom.js），那么使用window._categories和window._cat_item_id 访问这些值就很容易了

您可以在php文件的头中预加载js对象，如下所示：

<script type="text/javascript">
    var GLOBALS = {
        categories: <?php echo json_encode($categories); ?>,
        detail: '<?php echo isset($detail[0]['category_item_id']) ? $detail[0]['category_item_id'] : ""; ?>',
        action: '<?php echo $action; ?>'
    }
</script>
<script src="myscript.js">

接下来创建一个在按下按钮时触发的脚本。您可以从php文件中设置的全局变量中获取类别数据。

$(".add_field_button").on("click", function(e) {
     var $span = $('<span>', {id: "load"});
     var $label = $('<label>', {text: "Select Category"}).append($span);
     var $divs = [];
     for (var i in GLOBALS.categories) {
        var action = GLOBALS.action || "";
        var detail = GLOBALS.detail || "";      
        var id = GLOBALS.categories[i].id || "";
        var name = GLOBALS.categories[i].name || "";
        var $i = $('<input>', {
            class: category, 
            id: id,  
            type: "radio",
            onclick: "get_sub_category(" + id + ", 0)",
            name: "category_id",
            value: id,
            text: name.toLowerCase()
        });        
        if (action == "edit" && detail == id) {
            $i.prop("checked", true);
        }   
        var $l = $('<label>', {style: "font-weight: normal"}).append($i);
        var $d = $('<div>', { class: "radio-inline"}).append($l);
        $divs.append($d);
     }
     var $div = $('<div>', {class: "form-group"}).append($label, $divs);
     var $input = $('<input>', {type: "hidden", id: "selected_value", value: GLOBALS.detail});
     var $td = $('<td>', {colspan: 4}).append($div, $input);
     var $tr = $('<tr>').append($td);
     var $table = $("<table>", {class: "append-group table"}).append($tr);
     var $wrapper = $(".input_fields_wrap").append($('<hr>'), $table);
});