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

Javascript/HTML, Change multiple DIV content depending on DIV text. (Codepen)

本文关键字：DIV 内容 Codepen HTML 根据 文本 Javascript      更新时间：2023-09-26

我试图根据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/yYQVgQcodepen.io 中的代码

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

jQuery文档链接

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

选择器有问题。试试看，

$(".BackI").each( function(){
   var text = $(this).text()...
   $(this).css()...
})

获取匹配元素集中每个元素（包括其子元素）的组合文本内容，或设置匹配元素的文本内容。

函数被调用一次，str1的值是所有文本元素和splitet的组合结果，第一个"是6。您必须为每个分区调用您的函数。

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]);
})

虽然其他答案都是正确的，但我推荐这个：

<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中并进行解析

这是您的解决方案：

$(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]);
  });
});
相关文章：