1

我在 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 被调用，并在 alert(imgName); 上面的声明是：

imgs/pChange.png

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

4

0 回答 0