javascript - 使用基于服务器变量的javascript更改div的值

Question

我有以下 div，它从我的网络服务器加载一个字符串:

<div id="productTitle" class="productType"><h2>{{productType}}</h2></div>

根据此页面当前显示的产品类型，{{productType}} 将包含不同的值，即 SHIRT、LEGGINGS、SKIRT 等。

很明显，下面的代码会用更用户友好的产品类型标题替换该 div 中的所有内容，但这仅在“productType”的数量为 1 时有效。实际上，有 50 多个潜在的字符串可以生成。

<script>
    $( "div.productType" ).replaceWith( "<h2>American Apparel T-Shirt</h2>" );
</script>

我的问题是，根据服务器交付的产品类型，用户友好的标题必须是其他内容，即 SHIRT =“American Apparel T-Shirt”，LEGGINGS =“All-Over Printed Leggings”等。

我尝试的解决方案:

function onbodyload(){
    var d1 = document.getElementById('productTitle');
    if(d1.innerHTML==='SHIRT'){
        d1.innerHTML='American Apparel T-Shirt';
    }
};

为什么这行不通？是否因为脚本在“productType”变量加载到 DOM 之前执行？

Answer 1

Why doesn't this work

因为 innerHTML 还包含一个 <h2>标签将成为您要比较的字符串的一部分

---

使用 jQuery 的解决方案 text(function)

$(function(){
   $( "#productTitle h2" ).text(function(_, existingText ){
      switch (existingText ){
         case 'SHIRT':
            return 'American Apparel T-Shirt';
            break;
         // add other cases
         default:
           return existingText; 
      }    
   });
});