1

jqueryの次のメソッド($(document).ready(function(){}内)を使用して、一連のdivの背景画像を読み込んでいます:

$('.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