从选定的图像中提取 SRC，逗号分隔答案

【问题标题】：Extract SRC's from selected images, comma separated从选定的图像中提取 SRC，逗号分隔
【发布时间】：2013-08-22 09:38:47
【问题描述】：

我正在使用 Wordpress 插件，我只能在输入框中键入附件网址（逗号分隔）。我需要更改代码，以便我可以单击图像，它将提取 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）。

【问题讨论】：

标签： php jquery

【解决方案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(', '));
});

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

【讨论】：

【解决方案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>

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

【讨论】：

OP 想要删除第二次点击的图片的 SRC。
哎呀，错过了那部分。
任何想法如何在第二次点击时将其删除？ ^^
查看 Utaknos 的答案，这就是我想要的。

【解决方案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

【讨论】：