5

语境

我正在尝试为这个WordPress question建立一个答案。

我正在媒体上传厚框窗口中生成动态复选框。它们应该用于填充用户可以复制/粘贴其值的文本字段。

文本字段的最终输出是此短代码中的include属性[gallery include="23,39,45"]。

主要是，我需要帮助来构建最后一部分：Checkbox -> Populate/Unpopulate Text Field...

布局

  1. 动态复选框

  2. 文本字段的插入点（在<tr>控制台中显示的最后一个之后）

  3. 要填充的文本字段，应为include=" + CheckBoxID1 comma CheckBoxID2 comma etc + "

    在此处输入图像描述

实际代码

<?php
add_action( 'admin_head-media-upload-popup', 'wpse_53803_script_enqueuer' );

function wpse_53803_script_enqueuer() {
    if( $_GET['tab'] == 'gallery' ) 
    {
        ?>
            <style>#media-upload th.order-head {width: 5%} #media-upload th.actions-head {width: 10%}</style>
            <script type="text/javascript">
            jQuery(document).ready( function($) {
    
                /* Iterate through the media items */
                $('.filename.new').each(function(i,e){
                    var id = $(this).next('.slidetoggle').find('thead').attr('id').replace(/media-head-/, '');
                    var filename = $('<label>Add to gallery list <input type="checkbox" name="gal-item-'+id+'" id="gal-item-'+id+'" value=""  /></label>').insertBefore($(this));
                    filename.css('float','right').css('margin-right','40px');

                    filename.id = id; // PROBLEM: not sure how to do this in Javascript
                    
                    // BUG: the alert is being fired twice
                    filename.click(function() {
                        alert('Handler for img id = '+filename.id+' called.');
                    });
                });                 
            });
            </script><?php
    }
}

缺少的部分

  • 创建要填充的动态文本字段。
  • 解决评论中注意到的问题和错误。
  • 在filename.click(function()文本字段中构建所需的字符串。
4

1 回答 1

1

你可以使用类似的东西来做到这一点

 $(document).on('change','input[type="checkbox"][name^="gal-item"]',function(){
    var checkedIds = $('input[type="checkbox"][name^="gal-item"]:checked')
                       .map(function(){
       return parseInt($(this).prop('name').replace(/gal-item-/,''));
    }).get();

    $('#shortcode').val('include="'+checkedIds.join(',')+'"');

});

您可以通过检查添加媒体标记来替换您必须找到的document任何内容。closer static container​并且您已经找到了要添加输入字段的元素，像这样添加

$('<span>[gallery</span><input type="text" id="shortcode" /><span>]</span>')
 .appendTo(TARGETIDORCLASS);

工作演示

基于此，您重写的代码将类似于

jQuery(document).ready( function($) {
     //add input field
     $('<span>[gallery</span><input type="text" id="shortcode" /><span>]</span>')
 .appendTo(TARGETIDORCLASS);
    //bind checkbox change handler


     $(document).on('change','input[type="checkbox"][name^="gal-item"]',function(){
         var checkedIds = $('input[type="checkbox"][name^="gal-item"]:checked').map(function(){
       return parseInt($(this).prop('name').replace(/gal-item-/,''));

    }).get();

    $('#shortcode').val('include="'+checkedIds.join(',')+'"');

    });


    /* Iterate through the media items */
    $('.filename.new').each(function(i,e){
        var id = $(this).next('.slidetoggle')
                        .find('thead')
                        .attr('id')
                        .replace(/media-head-/, '');
       var filename = $('<label>Add to gallery list <input type="checkbox" name="gal-item-'+id+'" id="gal-item-'+id+'" value=""  /></label>')
              .insertBefore($(this));
       filename.css('float','right').css('margin-right','40px');

                });                 
            });

这应该有效。我很着急，无法进行太多测试，如果您发现任何错误，请检查并告诉我，我很乐意解决这些问题。

于 2012-06-06T03:37:52.490 回答