0

入力ボックスに添付ファイルの URL (カンマ区切り)しか入力できない 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 を削除したい)。

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

また、クリック イベントをデリゲートすることにも注意してください。すべてのアイテムにバインドするよりもはるかに効率的です。

于 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 に答える