Question

我们正在使用WordPress与WooCommerce。我正在修改Products Add-On扩展。我需要能够为每个附加项添加图像。我正在调用媒体上传表单，我可以在其中添加或选择产品的图像。当我选择我的图像时，“媒体上传”表单将消失，图像的URL将写入隐藏的表单字段。但是，由于我在页面上有多个相同输入字段的实例（对于每种类型的加载项），因此URL仅保存到输入字段的第一个实例。 javascript根据ID将URL写入字段。但是在许多情况下，没有为附加项目分配唯一ID，因为它们只是第一次添加。

然后可能会有一个部分来选择你的椅子，或者桌子上是否有叶子。

我需要找到一种方法来使用jQuery动态更改ID名称或类名，因此我可以将上传的图像绑定到正确的隐藏输入字段。实际上我几天前就已经开始工作，但不知何故打破了它。我不记得我做了什么，我似乎无法找到任何在线提示，指出我正确的方向。

这是我的javascript调用媒体上传框（感谢Mike Jolly和其他人）：

jQuery(document).ready(function() {
jQuery('.upload_image_button').on('click', function (event) {

    var file_frame;

    formfield = jQuery(this).prev().attr('id'); // Needed for the script to send the URL to the appropriate text box
    event.preventDefault();

    // Reopen media frame if it already exists.
    if ( file_frame ) {
            file_frame.open();
            return;
    }

    // Create media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
            title: 'Add an Image',
                    button: {
                          text: 'Choose Image'
            },
            multiple: false  // Set to true to allow multiple files to be selected
    });

    // Callback on image select.
    file_frame.on( 'select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery('#'+formfield).val(attachment.url);
    });

file_frame.open();
});
});

以下是我的表单字段：

<td class="image_column"><?php echo esc_attr( $option['image']) ?><input type="text" class="add-on-image" value="<?php echo esc_attr( $option['image']); ?>" name='product_addon_option_image[<?php echo $loop; ?>][]' id='product_addon_option_image-' style='width:200px' />
   <a href="#" class="upload_image_button <?php if ( $image_id > 0 ) echo 'remove'; ?>">
        <img src="<?php if ( ! empty( $option['image'] ) ) echo esc_attr($option['image']); else echo esc_attr( woocommerce_placeholder_img_src() ); ?>" step="any" id='_btn' type='button' style="width:100px;" /></a>
    <span class="overlay"></span>
</td>

我已正确排队脚本，并确保正确调用jquery和脚本。但它不起作用。

不幸的是，由于这是在网站的管理员方面，因此无法公开查看。

在我将产品页面详细信息提交到数据库之前，有没有办法将这些ID或类名重写为唯一？

在Wordpress中提交表单之前重命名多个输入的类

0 个答案: