Question

我有以下div从我的Web服务器加载一个String：

<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

为什么这不起作用

因为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; 
      }    
   });
});

Answer 2

虽然我相信你可以这样做，但我认为这是不好的做法，你应该考虑：

创建一个新表格字段以保存完整的“用户友好”标题
无论是什么替换“{{productType}}”，请改为使用正确的名称。

您没有提及替换“{{productType}}”的内容，如果您这样做，我可以帮助您做得更好。

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

2 个答案: