Извлечь SRC из отобранных изображений, разделенных запятой

Question

Я использую плагин Wordpress, где я могу только тип URL-адреса привязки (разделенные запятой) в поле ввода. Мне нужно изменить код, чтобы я мог щелкнуть изображение, и он выберет src, чтобы поместить его в поле ввода.

Я сделал это только с одним изображением.

Во-первых, я выбрал все изображения из своей медиа-библиотеки. И тогда я сделал это:

<img class="media-image" src="<?php echo $images[$i]; ?>"/> 
    <script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery('.media-image').click(function(){ 
      var thisValue = jQuery(this).attr('src'); 
      var thisTarget = jQuery('#target'); 
      thisTarget.val(thisValue); 
      return false; 
     }); 
    }); 
    </script> 

    <input id="target" type="text"></input> 

Что это делает: Всякий раз, когда я нажимаю изображение, то SRC будет введено в текстовом поле ввода. Когда я нажимаю другое изображение, значение будет соответствующим образом изменено.

Но как я могу достичь этого с помощью нескольких изображений? Итак, если я нажму 3 изображения, я хочу, чтобы все поля src были разделены запятыми в поле ввода. Всякий раз, когда я нажимаю выбранное изображение еще раз, я хочу, чтобы он был отменен (т. Е. Я хочу, чтобы src был удален из ввода).

Answer 1

Отслеживайте щелкнутые/дезактивированные изображения в массиве и присоединяйте их для формирования строкового значения для вашего ввода. Что-то вроде:

var imgs_tracker = [], field = jQuery('#target'); 
$('body').on('click', '.media-image', function() { 
    var src = $(this).attr('src'), already_in = imgs_tracker.indexOf(src); 
    already_in == -1 ? imgs_tracker.push(src) : imgs_tracker.splice(already_in, 1); 
    field.val(imgs_tracker.join(', ')); 
}); 

Обратите внимание, что я делегирую событие щелчка - гораздо эффективнее, чем привязывать его ко всем элементам.

Answer 2

<img class="media-image" src="<?php echo $images[$i]; ?>"/> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('.media-image').click(function(){ 
     var thisValue = jQuery(this).attr('src'); 
     var thisTarget = jQuery('#target'); 
     thisTarget.val(thisTarget.val() + "," + thisValue); 
     return false; 
    }); 
}); 
</script> 

<input id="target" type="text"></input> 

Выберите предыдущее значение и добавьте к нему.

Answer 3

$(function() { 
    var images = $(".media-image"); 

    images.on("click", function() { 
     var img = $(this), 
      selected = !!img.data("selected"); 

     img.data("selected", !selected); 

     var foo = images.filter(function() { 
         return !!$(this).data("selected"); 
        }).map(function (_, el) { 
         return this.src; 
        }).get(); 

     $("#target").val(foo.join()); 
    }); 
}); 

fiddle