Question

我在jquery中使用以下方法加载一组div的背景图像（在$（document）.ready（function（）{}中）：

$('.outD').each(function(){
    var inD = $(this).children().eq(0);
    /* EACH INNER DIV HAS AN INPUT ELEMENT WHOSE NAME MATCHES THE 
    BACKGROUND-IMAGE's NAME */
    /* SO I GATHER THE PORTION OF THE INPUT NAME TO BE USED IN THE 
    BACKGROUND-IMAGE URL */
    var imgName = inD.find('input[name="usr_min"]').next().attr('name').split('_');
    /* THEN I CREATE THE URL STRING TO BE INSERTED INTO THE CSS LINE BELOW */
    var backImg = "url('imgs/" + imgName[0] + ".png')";
    /* ALL THE ABOVE IS WORKING FINE AS I GET THE PROPER URL STRING ALERTED BELOW */ 
    alert(backImg);
    /* BUT WHEN I CALL THE FOLLOWING LINE TO ACTUALLY APPLY THE BACKGROUND IMAGE
    TO EACH OF THE $('.outD') DIVS LISTED, ONLY THE FIRST DIV GETS THE PROPER
    BACKGROUND IMAGE APPLIED */
    $(this).css("background-image",  backImg);
});

对于$（'。outD'）div的剩余部分，我收到“资源解释为图像但在chrome调试中使用MIME类型text / html传输，并且由于背景保持白色，因此没有图像被加载。

关于为什么设置背景图像的任何想法只适用于第一个div但是返回上面列出的所有剩余div的错误？

以下是受影响的div的html：

<div class="outD">
    <div class="inD1">
        <img src="./sHandle.png" style="width: 16px; height: 24px;" alt="">
        <img src="../sBack.png" alt="">
        <input type="hidden" name="usr_min" value="<?php echo minVal ?>">
        <input type="hidden" name="pChange_Min" value="">
        <input type="hidden" name="pChange_index" value="">
        <input type="hidden" name="isPercent" value="true">
    </div>
    <div class="inD2">
        <img src="./sHandle.png" style="width: 16px; height: 24px;" alt="">
        <img src="../sBack.png" alt="">
        <input type="hidden" name="usr_max" value="<?php echo maxVal; ?>">
        <input type="hidden" name="pChange_Max" value="">
    </div>
</div>

同样，上面的每个div都有一个不同的输入名称，紧跟在“usr_min”输入元素之后的输入元素。要在outD div中作为背景加载的每个图像都以此输入元素的名称命名。即在这种情况下，图像URL被调用，并在警报（imgName）中被警告;上面的陈述是：

imgs/pChange.png

正如我之前所说，这适用于第一个div，但不适用于布局相同的div的其余部分。

jquery - background-image - 资源解释为Image但使用MIME类型text / html传输

0 个答案: