从选定图像中抽取SRC，用逗号分隔

我在输入框中使用Wordpress插件，我只能在类型附件URL（以逗号分隔）。我需要改变代码，以便我可以点击一个图像，它会提取src以将其放入输入框中。从选定图像中抽取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）。

来源

2013-08-22 Don Munter

跟踪数组中点击/取消点击的图像，并将其加入以形成输入的字符串值。例如：

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(', ')); 
});

另请注意，我委托click事件 - 比将其绑定到每个项目更有效。

来源

2013-08-22 09:47:21 Utkanos

<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>

选择前一个值并追加到它。

来源

2013-08-22 09:41:17 Pankucins

OP想删除的SRC对于那些点击一次图像。 – Utkanos

哎呀，错过了那一部分。 – Pankucins

任何想法如何删除它再次点击？ ^^ –

$(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

来源

2013-08-22 10:01:25 Andreas

从选定图像中抽取SRC，用逗号分隔

回答

相关问题