0

我正在使用 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）。

4

3 回答 3

2

跟踪数组中单击/取消单击的图像并将其加入以形成输入的字符串值。就像是：

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-22T09:47:21.120 回答
1 
<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-22T09:41:17.597 回答
0 
$(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());
    });
});

小提琴

于 2013-08-22T10:01:25.990 回答