Question

我需要一些我正在创建的Javascript函数的帮助。本质上，我需要使用类.DetailRow遍历一组DIV并找到子DIV的内容（内部文本）。如果此文本与变量匹配，那么我需要用IMG HTML语句替换此内部文本。

顺便说一下，我有点新鲜（4个月大了！）如果问题很简单就道歉，但是我尝试了几个组合而且卡住了。

这是HTML：

<div class="DetailRow" style="display: ">..</div>
<div class="DetailRow" style="display: ">..</div>
<div class="DetailRow" style="display: ">
   <div class="Label">Availability:</div>
   <div class="Value">in stock + Free Shipping</div>
</div>

例如，如果我在LABEL内部文本中找到“in stock”，我想用变量“instock”的值替换它，这是一个IMG HTML语句。请参阅下面的代码尝试。

<script type="text/javascript">
$(window).load(function(){
    var instock = '<img src="https://linktoimgfolder/instock.gif" title="Product available, usually ships 24hrs to 48hrs after order receipt" style="margin-top:-3px;">';  
    var lowstock = '<img src="https://linktoimgfolder/lowstock.gif" title="Product stcok low, order today so you do not miss out">';
    var nostock = '<img src="https://linktoimgfolder/outstock.gif" title="Product out of stock, could ship 1 to 2 weeks after order receipt">';

    $('div.DetailRow')each(function(){
        if (indexOf($(this).childNodes[1].innerHTML, "in stock") > 0) {
             $(this).childNodes[2].innerHTML = "";
             $(this).childNodes[2].innerHTML = instock;
        } else if (indexOf($(this).childNodes[1].innerHTML, "low stock") > 0) {
             $(this).childNodes[2].innerHTML = "";
             $(this).childNodes[2].innerHTML = lowstock;
        } else {
             $(this).childNodes[2].innerHTML = "";
             $(this).childNodes[2].innerHTML = nostock;
        };
    });
});
</script>

顺便说一句，m我无法完全匹配文本，因为超出“+”的文本会不时改变，因此我正在尝试indexOf。

非常感谢您的协助！

中号

Answer 1

使用:contains选择器

var stock = {'in stock': instock, 'low stock': lowstock, 'no stock': nostock};

Object.keys(stock).forEach(function(key) {
    $('div.DetailRow div:contains(' + key + ')').html(stock[key]);
});

jsFiddle Demo

纯jQuery解决方案：

$.each(stock, function(key, value) {
    $('div.DetailRow div:contains(' + key + ')').html(value);
});

Answer 2

此行$('div.DetailRow')each(function(){中有拼写错误，然后您可以使用jQuery .text()和.html()来检查值并进行更新。

尝试：

$('div.DetailRow').find("div").each(function(){
        if($(this).text().indexOf("in stock")!=-1){
            $(this).text("");
            $(this).html(instock);
        }else if($(this).text().indexOf("low stock")!=-1){
            $(this).text("");
            $(this).html(lowstock);
        }else{
            $(this).text("");
            $(this).html(nostock);
        }
    });

的 DEMO FIDDLE

注意：更新了代码，以便在div中找到div.DetailsRow。根据您的要求进行更改。

JQuery查找子元素内部文本并替换为IMG HTML

2 个答案: