Javascript / HTML，根据DIV文本更改多个DIV内容。 （Codepen）

时间：2015-11-10 14:02:24

标签： javascript jquery html

我正在尝试根据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中的代码

6 个答案:

答案 0 :(得分：4)

使用.each()循环遍历每个元素。

jQuery documentation link

＆＃13;
＆＃13; 
$(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]);
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 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]);

  });

});
相关问题
最新问题