Question

我正在尝试替换Wordpress中某些自定义字段的文本。我通常会使用CSS，但如果不使用jQuery，这是不可能的（我不认为）。

代码：

 <div class="CustomRow left"><span>Vehicle Length (ft):</span> 25</div>

 <div class="CustomRow right"><span>Level Parking:</span> yes</div>

 <div class="CustomRow left"><span>Water:</span> no</div>

 <div class="CustomRow right"><span>Grey Water:</span> no</div>

 <div class="CustomRow left"><span>Black Water:</span> no</div>

 <div class="CustomRow right"><span>Electric:</span> no</div>

 <div class="CustomRow left"><span>Extra Night:</span> no</div>

如果“是”是div的值，我想替换文本，以便显示每个div的单独图像。图像由标签中的值确定。

如果值为“否”，则不显示图像。 div类是固定的，我试图在跨度中添加一个类，但无济于事。

有什么想法吗？

编辑添加：

我有更多的游戏，我想我几乎在那里，但仍然没有快乐：

$(document).ready(function() {
$('.CustomRow').each(function(i, e) {
    if (m = (text = $(e).text().trim()).match(re = /: +(yes|no)$/)) {
        class = $('span', e).text().replace(/[^\w]/g, '').toLowerCase();

    }
});

if ($('.levelparking') = (text = $(e).text().trim()).match(re = /: +(yes)$/)) {
// you can check div class here to determine the image
$('.levelparking').html('<img src="images/level_ground.jpg">');
}

});

Answer 1

这是我的解决方案。它遍历所有CustomRow元素，搜索以: yes结尾的文本。对于每个找到的元素，它会添加一个.yes类，并用空字符串替换: yes。

这是一个小提琴，展示了它的实际效果：http://jsfiddle.net/N24R7/1/

$(document).ready(function() {
    $('.CustomRow').each(function(i, e) {
        if ((text = $(e).text().trim()).match(re = /: +yes$/)) {
            $(e).addClass('yes').text(text.replace(re, ''));
        }
    });
});

更新：添加了更多改进 - http://jsfiddle.net/N24R7/2/

使用此代码回复您的评论 - 它无法正常工作，因为.text(text.replace(re, ''))从文本中删除了“是”，因此您的代码不再match(/yes/)。你只需要删除该位（它在下面的代码中注释掉）并且它将起作用

$(document).ready(function() {
    $('.CustomRow').each(function(i, e) {
        if (m = (text = $(e).text().trim()).match(re = /: +(yes|no)$/)) {
            var class = $('span', e).text().replace(/[^\w]/g, '').toLowerCase();
            $(e)
                .addClass(class)
//              .text(text.replace(re, ''))
            ;
        }
    });
    if ($('.levelparking').html().match(/yes/)) {
        $('.levelparking').html('<img src="levelparking.jpg">');
    }
    if ($('.water').html().match(/yes/)) {
        $('.water').html('<img src="water.jpg">');
    }
});

Answer 2

我不明白如何确定要加载的图像，但通常这样的事情应该有效：

if ($('#div-id').html().match(/yes/)) {
    // you can check div class here to determine the image
    $('#div-id').html('<img src="image.jpg">');
}

这只是一个例子，它有一些问题，但它可能会告诉你如何处理

Answer 3

你能编辑显示页面的主题的PHP代码吗？如果是这样，为什么不简单地让PHP代码为您插入图像？

<?php
  if (!strcmp($custom_field, 'yes')) 
    echo "<img src='yes.png' />"; 
  else if (!strcmp($custom_field, 'no')) 
    echo "<img src='no.png' />"; 
  else 
    echo $custom_field;
?>

使用Jquery将Wordpress自定义字段中的文本替换为图像

3 个答案: