Question

我使用的是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）。

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

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

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

从所选图像中提取SRC，以逗号分隔

3 个答案: