Question

我使用表格使用jQuery与jQuery进行分页，我在每行的第一列都有图像，并且有jQuery ui滑块允许我调整图像大小但是只能在第一行调整大小，如何调整所有图像的大小所有图像的第一列同时出现！

请参阅fiddle

上的演示

var orginalWidth = $("#image").width();

$("#infoSlider").text(orginalWidth + ', 100%');

$("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function (event, ui) {
        var fraction = (1 + ui.value / 100),
            newWidth = orginalWidth * fraction;

        $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%');

        $("#image").width(newWidth);
    }
});

Answer 1

ID必须是唯一的，而是使用类：

<img class="image" src="http://practicalaction.org/images/sea-of-ducks-300.jpg" />

<强> jsFiddle example

var orginalWidth = $(".image").width();
$("#infoSlider").text(orginalWidth + ', 100%');
$("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function (event, ui) {
        var fraction = (1 + ui.value / 100),
            newWidth = orginalWidth * fraction;

        $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%');

        $(".image").width(newWidth);
    }
});

Answer 2

您对所有图片使用相同的id。那不好。

尝试使用类来识别它们，例如

<img ... class="resizable-image" ... />

然后在jQuery中使用.resizable-image而不是#image选择器。

如何调整图像大小

2 个答案: