javascript - 影响图像数量的Jquery选择

Question

我有一个包含多行的表，每行有:

• 布局(选择)
• 图像 * 10

图像的数量取决于所选的布局。我想编写一些 jquery 代码，根据选择/更改的布局隐藏/显示图像数量。

目前我的这个无法正常工作，每次只显示一张图像。

$('select.layouts').bind("change keyup",function(){
var val = $(this).val();
switch(val){
case 1:
    showImgs = 1;
    break;
case 2:
    showImgs = 2;
    break;
case 3:
    showImgs = 3;
    break;
case 4:
    showImgs = 4;
    break;
default:
    showImgs = 1;
}
$(this).parents("tr").find(".images .image:lt("+showImgs+")").show();
})

另外，最好的做法是不要将每个布局添加多少图像到 JS 代码中，而是为选择选项添加一个数据属性？

HTML 表格

<table class="list" id="images">
    <thead>
        <tr>
            <td>Layout:</td>
            <td>Image:</td>
        </tr>
    </thead>
    <tbody id="image-row0">
        <tr>
            <td>
                <select class="layouts" name="banner_image[0][layout]">
                    <option value="1">Layout 1</option>
                    <option selected="selected" value="2">Layout 2</option>
                    <option value="3">Layout 3</option>
                    <option value="4">Layout 4</option>
                    <option value="5">Layout 5</option>
                    <option value="6">Layout 6</option>
                    <option value="7">Layout 7</option>
                    <option value="8">Layout 8</option>
                    <option value="9">Layout 9</option>
                    <option value="10">Layout 10</option>
                </select>
            </td>
            <td class="left images">
                <div style="display: none" class="image">
                    <label for="thumb0">Image 1</label><br>
                    <input type="hidden" id="image0" value="data/slides/dd1.png" name="banner_image[0][image]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb20">Image 2</label><br>
                    <input type="hidden" id="image20" value="data/slides/dd1.png" name="banner_image[0][image2]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb30">Image 3</label><br>
                    <input type="hidden" id="image30" value="data/slides/dd1.png" name="banner_image[0][image3]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb40">Image 4</label><br>
                    <input type="hidden" id="image40" value="data/slides/dd1.png" name="banner_image[0][image4]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb50">Image 5</label><br>
                    <input type="hidden" id="image50" value="data/slides/dd1.png" name="banner_image[0][image5]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb60">Image 5</label><br>
                    <input type="hidden" id="image60" value="data/slides/dd1.png" name="banner_image[0][image6]"> <br>
                </div>
            </td>
        </tr>
    </tbody>
    <tbody id="image-row1">
        <tr class="odd">
            <td>
                <select class="layouts" name="banner_image[1][layout]">
                    <option selected="selected" value="1">Layout 1</option>
                    <option value="2">Layout 2</option>
                    <option value="3">Layout 3</option>
                    <option value="4">Layout 4</option>
                    <option value="5">Layout 5</option>
                    <option value="6">Layout 6</option>
                    <option value="7">Layout 7</option>
                    <option value="8">Layout 8</option>
                    <option value="9">Layout 9</option>
                    <option value="10">Layout 10</option>
                </select>
            </td>
            <td class="left images">
                <div style="display: none" class="image">
                    <label for="thumb0">Image 1</label><br>
                    <input type="hidden" id="image0" value="data/slides/dd1.png" name="banner_image[0][image]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb20">Image 2</label><br>
                    <input type="hidden" id="image20" value="data/slides/dd1.png" name="banner_image[0][image2]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb30">Image 3</label><br>
                    <input type="hidden" id="image30" value="data/slides/dd1.png" name="banner_image[0][image3]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb40">Image 4</label><br>
                    <input type="hidden" id="image40" value="data/slides/dd1.png" name="banner_image[0][image4]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb50">Image 5</label><br>
                    <input type="hidden" id="image50" value="data/slides/dd1.png" name="banner_image[0][image5]"> <br>
                </div>
                <div style="display: none" class="image">
                    <label for="thumb60">Image 5</label><br>
                    <input type="hidden" id="image60" value="data/slides/dd1.png" name="banner_image[0][image6]"> <br>
                </div>
            </td>
        </tr>
    </tbody>
</table>

编辑:@Kalle H.Väravas 代码

var layouts_data = {
    0: {
        name: 'None',
        images: 0
    },
    1: {
        name: 'Layout 1',
        images: 1
    },
    2: {
        name: 'Layout 2',
        images: 4
    },
    3: {
        name: 'Layout 3',
        images : 6
    },
    4: {
        name: 'Layout 4',
        images: 4
    },
    5: {
        name: 'Layout 5',
        images: 5
    }
};


SetLayout = function (row, layoutid) {
    var current_layout = layouts_data[layoutid];
    $(row).find('.image').hide().each(function (i, elm) {
        if ((i + 1) <= current_layout['images']) {
            $(elm).show();
        }
    });
};

$(document).ready(function () {
    $('#images tbody tr').each(function(i, elm) {
        SetLayout($(this), $(this).find('select.layouts option:selected').val());
    });
});

// Lets catch the event
$('select.layouts').bind("change keyup", function () {
    SetLayout($(this).parents("tr"), $(this).val()); 
});

Answer 1

将 switch 语句替换为:

var showImgs = 1;
if (val < 5) showImgs = val;

我可能也会通过 parseInt(val, 10) 运行 val 以达到良好的效果。