我正在尝试根据DIV的文本最初更改DIV背景图像和文本。当我使用1 DIV时它可以工作，但是当我做多个DIV时它不会。我怎么能用多个DIV做到这一点？谢谢。
HTML
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div class="BackI" style="height: 250px; width: 250px;">6,Background Image1-</div>
<div class="BackI" style="height: 250px; width: 250px;">99,Background Image2-</div>
<div class="BackI" style="height: 250px; width: 250px;">9,Background Image3-</div>
JS
$(function() {
var text = $('.BackI').text().toLowerCase();
var str1 = text.split(',');
switch (str1[0]) {
case '6':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-grey-square-icons-symbols-shapes/120234-matte-grey-square-icon-symbols-shapes-tile.png';
break;
case '99':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-red-and-white-square-icons-symbols-shapes/124116-matte-red-and-white-square-icon-symbols-shapes-tile.png';
break;
case '9':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-blue-and-white-square-icons-symbols-shapes/118294-matte-blue-and-white-square-icon-symbols-shapes-tile1-ps.png';
break;
default:
image = '';
}
$('.BackI').css({
'background-image': 'url(' + image + ')'
}).text(str1[1]);
});
http://codepen.io/anon/pen/yYQVgQ codepen.io中的代码
答案 0 :(得分：4)
使用.each()循环遍历每个元素。
$(function() {
$('.BackI').each(function() {
var text = $(this).text().toLowerCase();
var str1 = text.split(',');
switch (str1[0]) {
case '6':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-grey-square-icons-symbols-shapes/120234-matte-grey-square-icon-symbols-shapes-tile.png';
break;
case '99':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-red-and-white-square-icons-symbols-shapes/124116-matte-red-and-white-square-icon-symbols-shapes-tile.png';
break;
case '9':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-blue-and-white-square-icons-symbols-shapes/118294-matte-blue-and-white-square-icon-symbols-shapes-tile1-ps.png';
break;
default:
image = '';
}
$(this).css({
'background-image': 'url(' + image + ')'
}).text(str1[1]);
});
});<script src="//code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div class="BackI" style="height: 250px; width: 250px;">6,Background Image1-</div>
<div class="BackI" style="height: 250px; width: 250px;">99,Background Image2-</div>
<div class="BackI" style="height: 250px; width: 250px;">9,Background Image3-</div>
答案 1 :(得分：2)
选择器有问题。试试这样，
$(".BackI").each( function(){
var text = $(this).text()...
$(this).css()...
})
答案 2 :(得分：0)
获取匹配元素集合中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容。
你的功能被调用一次，str1的值是所有text-Elements和splittet的组合结果，由第一个＆＃34;，＆＃34;它是6.您必须为每个div调用您的函数。
答案 3 :(得分：0)
JSFiddle： http://jsfiddle.net/TrueBlueAussie/ux88bng2/
$('.BackI').each(function () {
var text = $(this).text().toLowerCase();
var str1 = text.split(',');
switch (str1[0]) {
case '6':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-grey-square-icons-symbols-shapes/120234-matte-grey-square-icon-symbols-shapes-tile.png';
break;
case '99':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-red-and-white-square-icons-symbols-shapes/124116-matte-red-and-white-square-icon-symbols-shapes-tile.png';
break;
case '9':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-blue-and-white-square-icons-symbols-shapes/118294-matte-blue-and-white-square-icon-symbols-shapes-tile1-ps.png';
break;
default:
image = '';
}
$(this).css({
'background-image': 'url(' + image + ')'
}).text(str1[1]);
})
答案 4 :(得分：0)
虽然其他答案都是正确的，但我会推荐这个：
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div class="BackI" style="height: 250px; width: 250px;" data-image_number=6 >Background Image1</div>
<div class="BackI" style="height: 250px; width: 250px;" data-image_number=99 >Background Image2</div>
<div class="BackI" style="height: 250px; width: 250px;" data-image_number=9 >Background Image3</div>
$(function() {
$('[data-image_number]').each(function(){
var image_number = $(this).attr('data-image_number');
switch (image_number) {
case '6':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-grey-square-icons-symbols-shapes/120234-matte-grey-square-icon-symbols-shapes-tile.png';
break;
case '99':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-red-and-white-square-icons-symbols-shapes/124116-matte-red-and-white-square-icon-symbols-shapes-tile.png';
break;
case '9':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-blue-and-white-square-icons-symbols-shapes/118294-matte-blue-and-white-square-icon-symbols-shapes-tile1-ps.png';
break;
default:
image = '';
break;
}
if(image)
$(this).css({
'background-image': 'url(' + image + ')'
});
});
});
使用html自定义数据元素和属性而不是在html中进行解析并解析它会更加简单。
答案 5 :(得分：0)
以下是您的解决方案：
$(function() {
$(".BackI").each( function(){
var text = $(this).text().toLowerCase();
var str1 = text.split(',');
switch (str1[0]) {
case '6':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-grey-square-icons-symbols-shapes/120234-matte-grey-square-icon-symbols-shapes-tile.png';
break;
case '99':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-red-and-white-square-icons-symbols-shapes/124116-matte-red-and-white-square-icon-symbols-shapes-tile.png';
break;
case '9':
image = 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/matte-blue-and-white-square-icons-symbols-shapes/118294-matte-blue-and-white-square-icon-symbols-shapes-tile1-ps.png';
break;
default:
image = '';
}
$(this).css({'background-image': 'url(' + image + ')'}).text(str1[1]);
});
});