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要素に別々の画像が表示されるように、テキストを置き換えたいです。画像はタグの値によって決定されます。

値が "No"の場合、表示される画像はありません。 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">'); 
} 

これは一例であり、それはいくつかの問題を抱えているが、それは

をprocedeする方法をお見せして

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; 
?>