使用jQuery基于复选框ID填充文本字段？

Question

上下文

我正在尝试为这个WordPress问题建立一个答案.

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

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

主要是,我需要一个帮助来构建这最后一部分:复选框 - >填充/取消填充文本字段...

---

布局

1. 动态复选框
2. 文本字段的插入点(在<tr>控制台中显示的最后一个之后)

3. 要填充的文本字段,应该包括=" + CheckBoxID1 ^逗号 CheckBoxID2 ^逗号 等+ "

   

---

实际代码

<?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()生成的文本字段中所需的字符串.

Answer 1

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

\n\n

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

\n\n

您可以通过检查添加媒体标记来替换为您必须找到的document任何内容。closer static container\xe2\x80\x8b\n并且您已经找到一个要添加输入字段的元素，将其添加为

\n\n

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

\n\n

工作演示

\n\n

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

\n\n

jQuery(document).ready( function($) {\n     //add input field\n     $(\'<span>[gallery</span><input type="text" id="shortcode" /><span>]</span>\')\n .appendTo(TARGETIDORCLASS);\n    //bind checkbox change handler\n\n\n     $(document).on(\'change\',\'input[type="checkbox"][name^="gal-item"]\',function(){\n         var checkedIds = $(\'input[type="checkbox"][name^="gal-item"]:checked\').map(function(){\n       return parseInt($(this).prop(\'name\').replace(/gal-item-/,\'\'));\n\n    }).get();\n\n    $(\'#shortcode\').val(\'include="\'+checkedIds.join(\',\')+\'"\');\n\n    });\n\n\n    /* Iterate through the media items */\n    $(\'.filename.new\').each(function(i,e){\n        var id = $(this).next(\'.slidetoggle\')\n                        .find(\'thead\')\n                        .attr(\'id\')\n                        .replace(/media-head-/, \'\');\n       var filename = $(\'<label>Add to gallery list <input type="checkbox" name="gal-item-\'+id+\'" id="gal-item-\'+id+\'" value=""  /></label>\')\n              .insertBefore($(this));\n       filename.css(\'float\',\'right\').css(\'margin-right\',\'40px\');\n\n                });                 \n            });\n

\n\n

这应该有效。我很着急，无法进行太多测试，请检查并让我知道是否发现任何错误，我很乐意修复这些错误。

\n