Замените текст в пользовательских полях Wordpress изображением, используя Jquery

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

Можете ли вы редактировать 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;
?>

Answer 3

Я не понимаю, как определяется изображение для загрузки, но обычно что-то вроде этого должно работать:

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

Это всего лишь пример, и у него есть некоторые проблемы, но он может показать вам, какпродолжить