Question

我正在为我的wordpress管理页面制作一个上传媒体表单，而且我对最终代码有一些问题，这些问题阻碍了它。

这个想法是，

启动时会显示一个表单是否有值。如果你单击克隆，它将克隆该表单并增加id和name，它还将为所有表单添加一个删除按钮，如果你在任何表单上单击删除，id和name标签将为所有表单减少之后无论发生什么事情，表格总是1,2,3,4,5等等，请看小提琴http://jsfiddle.net/jLc8X/

第一个问题是：

如果您克隆第一个表单并为两个表单赋值并保存，当您刷新页面时，两个表单都没有删除按钮（所有表单应该有一个删除按钮，除非只有一个）如果你那么点击克隆，删除按钮将显示所有表格，然后将正常工作，你将无法在小提琴上看到这一点。

第二个问题是：

单击克隆时，可能是您要立即上传图像，这在您保存表单之前不起作用。

这是代码

我认为第二个问题归结为单独的脚本，但是我将它们连接起来，我无法让它工作。

这是jquery，你也可以在小提琴中查看它。

function updateClonedInput(index, element) {
    $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" +  index);
    $(element).find(">:first-child").attr("id", "upload_image_link_" + index);
    $(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
    $(element).find(">:first-child").next().attr("id", "show_upload_image_link_button_" + index);
}

$(document).on("click", "button.clone", function(e){
    e.preventDefault();
    var cloneIndex = $(".clonedInput").length + 1;
    var new_Input = $(this).parents(".clonedInput").clone();
    updateClonedInput(cloneIndex, new_Input);    
    $('button.remove').show();
});
$(document).on("click", "button.remove", function(e){
    e.preventDefault();
    $(this).parents(".clonedInput").remove();
    if ($('.clonedInput').length < 2) {
        $('button.remove').hide();
    }
    $(".clonedInput").each( function (cloneIndex, clonedElement) {
        updateClonedInput(cloneIndex + 1, clonedElement);
    })
});

// Media Upload
var custom_uploader;
$('.upload_images').click(function(e) {
    alert(this.id);
    e.preventDefault();
    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
     return;
    }
    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
    title: 'Choose Image',
    button: {
        text: 'Choose Image'
    },
     multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
var ter = $(this).siblings('input').attr('id');
custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('#'+ter).val(attachment.url);
    });
    //Open the uploader dialog
    custom_uploader.open();
});

Answer 1

第一个问题是如何在页面加载时生成html的问题，如果我理解的话，你需要手动添加该按钮。

第二个问题是因为这段特殊代码：

$('.upload_images').click(function(e) {

这只绑定到现有元素，如果你想绑定新按钮，你应该把它写成：

$(document).on('click','.upload_images',function(e) {

让我知道你的想法。

克隆表单，按钮无法正常工作，在启动时无法正确显示

1 个答案: