我在当前输入中无法获取上载的图片网址,所有输入均已更新

I'm creating a theme option to Wordpress admin and trying to upload images on various input. But can't get the uploaded image url in current input, it's updated on all input. I want to add the URL on current input when select event triggered. Kindly please help me to solve it.

这是下面的代码:

<div class="upload_img">

                         <img class="uploaded_img" src="<?php echo esc_attr( get_option('logo_light') ); ?>" height="100" width="100"/>
                         <input class="uploaded_img__url" type="text" name="logo_light" size="60" value="<?php echo get_option('logo_light'); ?>">
                         <a href="#" class="upload_btn">Upload</a>

                        </div>
<div class="upload_img">

                         <img class="uploaded_img" src="<?php echo esc_attr( get_option('logo_light') ); ?>" height="100" width="100"/>
                         <input class="uploaded_img__url" type="text" name="logo_light" size="60" value="<?php echo get_option('logo_light'); ?>">
                         <a href="#" class="upload_btn">Upload</a>

                        </div>

这是我的JQuery:

jQuery(function($){
$('.upload_btn').click(function(e) {
  e.preventDefault();

  var custom_uploader = wp.media({
      title: 'Custom Image',
      button: {
          text: 'Upload Image'
      },
      multiple: false  // Set this to true to allow multiple files to be selected
  })
  .on('select', function() {
      var attachment = custom_uploader.state().get('selection').first().toJSON();
      $('.uploaded_img').attr('src', attachment.url);
      $('.uploaded_img__url').val(attachment.url);

  })
  .open();
});
jQuery(function($){
  $('.upload_btn').click(function(e) {
      e.preventDefault();

      var custom_uploader = wp.media({
          title: 'Custom Image',
          button: {
              text: 'Upload Image'
          },
          multiple: false  // Set this to true to allow multiple files to be selected
      })
      .on('select', function() {
          var attachment = custom_uploader.state().get('selection').first().toJSON();
          $('.uploaded_img').attr('src', attachment.url);
          $('.uploaded_img__url').val(attachment.url);

      })
      .open();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload_img">

							 <img class="uploaded_img" src="<?php echo esc_attr( get_option('logo_light') ); ?>" height="100" width="100"/>
							 <input class="uploaded_img__url" type="text" name="logo_light" size="60" value="<?php echo get_option('logo_light'); ?>">
							 <a href="#" class="upload_btn">Upload</a>

							</div>
             
<div class="upload_img">

							 <img class="uploaded_img" src="<?php echo esc_attr( get_option('logo_light') ); ?>" height="100" width="100"/>
							 <input class="uploaded_img__url" type="text" name="logo_light" size="60" value="<?php echo get_option('logo_light'); ?>">
							 <a href="#" class="upload_btn">Upload</a>

							</div>

});

评论