Question

我正在使用jquery。我将一个图像附加到我的div元素中。它很棒。我想用js函数更改css属性（如max-heigth或width等）。

但没有任何作用......我尝试了在页面上修复图像（之前没有附加，在html中严格..）并且有效...

有人有想法吗？

我的功能如下：

function makeBigger() {

 var origHeight = $("#articlePicture").css("max-height");
 var newHeight = parseInt(origHeight.replace("px", ""));

 newHeight+=25;
 newHeight+="px";

 $("#articlePicture").css("max-height", newHeight);
}

谢谢！

编辑：重要的是说：它不适用于appendet图片，firebug等所有尝试过的 - 工作！

edit2：appending-function（它的一个简单版本......）：

function appendThis(artikelNumber, pictureToAppend) {
        img="<img src='"+pictureToAppend+"' alt='articlePicture' id='articlePicture' class='articlePicture' />";
        $('.article'+artikelNumber+'Text').append(img);
    }

Answer 1

appendThis函数中有两件事可能是它无效的原因。

每次运行此功能（并附加新图像）时，都会为该图像指定相同的ID。这不好，ID必须在页面上是唯一的。如果您有多个具有相同ID的元素，jQuery将无法选择它们。您应该使用class属性。这样，您可以选择如下图像：$('img.articlePicture')
您没有声明变量img，因此使其成为隐式全局变量。应该避免这种情况，因为它可能导致意外的名称冲突。

我修复了以下两个问题：

function appendThis(n, url) {
    var img = '<img src="' + url + '" class="articlePicture" alt="Picture">';
    $('.article' + n + 'Text').append(img);
}

此外，这是makeBigger功能的优化版本：

function makeBigger() {   
    $("img.articlePicture").css('max-height', function(i,v) {
        return parseInt(v, 10) + 25 + 'px';
    });
}

Answer 2

如果你想要它更大，只需改变高度或设置最小高度。 max-height不会让它变大，只是不允许它超过那个高度。

附加图像后Jquery更改css属性

2 个答案: