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では機能しません。