Nur Bild Upload URL auf bestimmte Eingabefeld

Question

Ich mache ein benutzerdefiniertes Feld in einer benutzerdefinierten Meta-Box in WordPress. Ich habe Textfelder, Textfelder und Kontrollkästchen eingegeben, die alle gut funktionieren. Ich habe auch eine Schaltfläche zum Durchsuchen für die Bildergalerie, die funktioniert.

Wenn Sie auf die Schaltfläche "Durchsuchen" klicken, wird der Bildschirm zum Hochladen von WordPress-Medien angezeigt. Wenn Sie dieses Bild auswählen, ersetzt es den Eingabewert (sowie eine Miniaturansicht).

Hier ist der relevante Teil der WordPress Meta-Box eingerichtet.

function show_custom_fields_meta_box() { 
    global $post; 
    $meta = get_post_meta($post->ID, 'custom_fields', true); ?> 
    <input type="hidden" name="custom_meta_box_nonce" value="<?php echo wp_create_nonce(basename(__FILE__)); ?>"> 

    <!-- image upload field --> 
    <p> 
     <label for="custom_fields[image]">Image Upload</label><br> 
     <input type="text" name="custom_fields[image]" id="custom_fields[image]" class="meta-image regular-text" value="<?php echo $meta['image']; ?>"> 
     <input type="button" class="button image-upload" value="Choose or Upload an Image"> 
     <div class="image-preview"><img src="<?php echo $meta['image']; ?>" style="max-width: 250px;"></div> 
    </p> 
} 

Und hier ist die jQuery Ich bin mit der Wordpress-Mediengalerie zu öffnen und das Bild hochladen.

<script> 
    /* 
    * Attaches the image uploader to the input field 
    */ 
    jQuery(document).ready(function ($) { 

     // Instantiates the variable that holds the media library frame. 
     var meta_image_frame; 
     // Runs when the image button is clicked. 
     $('.image-upload').click(function (e) { 
      // Prevents the default action from occuring. 
      e.preventDefault(); 

      var selected = $(this); 
      var meta_image = $('.meta-image'); 

      // If the frame already exists, re-open it. 
      if (meta_image_frame) { 
       meta_image_frame.open(); 
       return; 
      } 
      // Sets up the media library frame 
      meta_image_frame = wp.media.frames.meta_image_frame = wp.media({ 
       title: meta_image.title, 
       button: { 
        text: meta_image.button 
       } 
      }); 
      // Runs when an image is selected. 
      meta_image_frame.on('select', function() { 
       // Grabs the attachment selection and creates a JSON representation of the model. 
       var media_attachment = meta_image_frame.state().get('selection').first().toJSON(); 
       // Sends the attachment URL to our custom image input field. 
       $('.meta-image').val(media_attachment.url); 

       var imgurl = $('.meta-image').val(); 

       $(selected).prev().val(imgurl); 
       $(selected).closest('div').find('.image-preview').children('img').attr('src',imgurl); 
      }); 
      // Opens the media library frame. 
      meta_image_frame.open(); 
     }); 
    }); 
</script> 

Jetzt funktioniert das völlig in Ordnung, wie sie ist. Die input Schaltfläche hat eine Klasse von .image-upload, und das input Textfeld hat eine Klasse von meta-image.

Allerdings, wenn ich ein anderes Feld hinzufügen ... (custom_fields[image2])

<p> 
    <label for="custom_fields[image2]">Image Upload</label><br> 
    <input type="text" name="custom_fields[image2]" id="custom_fields[image2]" class="meta-image regular-text" value="<?php echo $meta['image2']; ?>"> 
    <input type="button" class="button image-upload" value="Choose or Upload an Image"> 
    <div class="image-preview"><img src="<?php echo $meta['image2']; ?>" style="max-width: 250px;"></div> 
</p> 

Die jQuery wird beide browse Schaltflächen und Texteingaben gelten, weil es sich um eine Klasse ist. Ich weiß (denke), ich muss eine Form von $(this) verwenden, um die richtige Schaltfläche und Texteingabe zu erhalten, aber alle meine Bemühungen waren bisher vergeblich.

Ich habe versucht $(this).closest('.meta-image'), aber das scheint nicht zu funktionieren.

Vielen Dank!

Answer 1

Sie konnten die Variable ausgewählt in der select-Ereignishandler verwenden.

Versuchen Sie folgendes:

var metaImage = $(selected).closest('p').find('.meta-image), 
    imgurl = $(metaImage).val(); 

Answer 2

konnte ich es mit diesem Code tun:

var meta_image = $(this).parent().children('.meta-image');