1

このためのjsfiddleをhttp://jsfiddle.net/MZtML/で作成しました

画像の種類を判別するための選択ボックスが付いた画像の行があります。これらはオプションです：

<select name="image-type">
    <option value="none">Select Image Type</option>
    <option value="small-thumbnail">Small Thumbnail (70x50)</option>
    <option value="thumbnail" selected="selected">Thumbnail (140x100)</option>
    <option value="feature">Feature</option>
    <option value="gallery">Gallery</option>
</select>

画像の行が複数ある場合、1行だけを機能として指定できるようにします。別の行が現在機能として設定されている場合は、[画像タイプの選択]にリセットする必要があります。SmallThumbnailとThumbnailでも同じです。

[画像タイプの選択]および[ギャラリー]として複数の画像を設定できます。

私は次のjQueryを使用しようとしています：

$('#image_container').on('change', '[name="image-type"]', function() {
    $this = $(this);

    $('[name="image-type"]').not($this).each(function() {
        if ($(this).val() === 'feature') {
            $(this).val('none');
        }
    });
});

私はこれのいくつかのバリエーションを試しました、そして私は近づきました、しかし私が試したものは何もそれを正確にしないようです。誰かが私を助けることができますか？

4

2 に答える 2

3

jsFiddleデモを更新

いくつかのこと：

あなたはフィドルでコンテナエリアが間違っていました、あなたは必要でした：#image_library。また、選択したオプションの値が必要な場合は、次のことを行う必要があります$(this).find('option:selected').val()。

$('#image_library').on('change', '[name="image-type"]', function() {
    var $this = $(this),
        _current = $(this).find('option:selected').val(); // save current val

    // we're only allowing 'gallery' to have multiple

    if (_current !== 'gallery') {

        // loop through all selects to remove any matching values
        $('[name="image-type"]').not($this).each(function() {

            if ($(this).find('option:selected').val() === _current) {
                $(this).val('');
            }
        });
    }
});

</ p>

于 2012-08-23T17:54:16.550 に答える
2

jsFiddle

@mcpDESIGNSのすばらしい作業を基に、ハードコードされた"feature"値を削除し、代わりに現在選択されているオプションの値を取得しました。次に、他のドロップダウンを繰り返し処理し、それに応じて比較できます。

varキーワードがないと、$this変数のスコープはグローバルになります。

$('#image_library').on('change', '[name="image-type"]', function() {
    // without the var, you're creating a global variable $this...
    var $this = $(this),
        thisValue = $this.find('option:selected').val();

    // using find() with an id context is faster
    $('#image_library').find('[name="image-type"]').not($this).each(function() {
        //console.log($(this).find('option:selected').val());
        if ($(this).find('option:selected').val() === thisValue) {
            $(this).val('');
        }
    });
});

</ p>

于 2012-08-23T18:34:32.063 に答える