文字列が何か等しいかどうかを確認してimgと置き換えます

Question

文字列を画像に置き換える正しいjQuery構文を見つけようとすると、が特定の文字列と等しい場合のみです。それは、以下の例を含めることができるように

divが「XML」から情報を引っ張っている。

<div class="brand">Sony</div> 
<div class="brand">Samsung</div> 
<div class="brand">Sony Samsung</div> 

それでは、私が欲しいのです：

if ('.brand') == 'Sony' //replace text with img src="image1.jpg" <br/> 
if ('.brand') == 'Samsung' //replace text with img src="image2.jpg" <br /> 
if ('.brand') == 'Sony Samsung' //then both images should show up in the div.** 

私は次の行でテストされているが、すべてのケースをカバーすることができませんでした。デモ

$('.brand').each(function() { 
    if ($(this).html() === 'Sony') { 
    $(this).html('<img src="test" />') 
    } 
}); 

：

.html('Sony', "<img src='image1.jpg' />"); 

Answer 1

ここにあなたの規定の問題を解決して答えます：

var brands = document.querySelectorAll(".brand"); 
 

 
brands.forEach(function(b){ 
 
    switch(b.textContent.toLowerCase()){ 
 
    case "sony": 
 
     b.innerHTML = "<img src='image1.jpg' alt='image1.jpg' />"; 
 
     break; 
 
    case "samsung": 
 
     b.innerHTML = "<img src='image2.jpg' alt='image2.jpg' />"; 
 
     break; 
 
    case "sony samsung": 
 
     b.innerHTML = "<img src='image1.jpg' alt='image1.jpg' /><img src='image2.jpg' alt='image2.jpg' />"; 
 
     break; 
 
    } 
 
});

<div class="brand">Sony</div> 
 
<div class="brand">Samsung</div> 
 
<div class="brand">Sony Samsung</div>

しかし、あなたの記載されたユースケースは非常に脆弱であり、上記の解決策はニーズの変化の瞬間を打破します。このバージョンでは、ソニー、サムスンまたは両方は、タグ内のどこかにあるかどうかを確認するためにさらに一歩をチェック行くので、それは完全に一致している必要はありません。

var brands = document.querySelectorAll(".brand"); 
 

 
brands.forEach(function(b){ 
 
    
 
    var val = b.textContent.toLowerCase(); 
 
    if(val.indexOf("sony") > -1 && val.indexOf("samsung") > -1){ 
 
    b.innerHTML = "<img src='image1.jpg' alt='image1.jpg' /><img src='image2.jpg' alt='image2.jpg' />"; 
 
    } else if(val.indexOf("sony") > -1){ 
 
    b.innerHTML = "<img src='image1.jpg' alt='image1.jpg' />"; 
 
    } else if(val.indexOf("samsung") > -1){ 
 
    b.innerHTML = "<img src='image2.jpg' alt='image2.jpg' />"; 
 
    } 
 
    
 
});

<div class="brand">my favorite brand is Sony</div> 
 
<div class="brand">Samsung is the best</div> 
 
<div class="brand">Sony rules but Samsung is better</div>

Answer 2

たぶん何かが助ける

https://jsfiddle.net/mssecwL2/3/ 

しかし、あなたはJSせずにそれを行うことはできませんか？初めにimgとテキストを置き換えるだけで

Answer 3

私はあなたが私を得ることはないと思うが、これは何かが欲しいですか？

if($('.foo').text() == 'sony') $('.foo2').html('<img/>');

Answer 4

var src1="http://fullhdpictures.com/wp-content/uploads/2016/01/Sony-Logos.jpg"; 
 
var src2="http://www.brycomm.com/wp-content/uploads/2011/08/Samsung-Logo.png"; 
 

 
$(".brand").each(function(i,a){ 
 
if($(a).text()=="Sony"){ 
 
$(a).html("<img class='resize'src="+src1+">"); 
 
} 
 
    else if($(a).text()=="Samsung"){ 
 
$(a).html("<img class='resize'src="+src2+">"); 
 
} 
 
    else if($(a).text()){ 
 
    $(a).html("<img class='resize'src="+src1+">"+"<img class='resize'src="+src2+">"); 
 
    } 
 
})

.resize { 
 
    width: 75px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="brand">Sony</div> 
 
<div class="brand">Samsung</div> 
 
<div class="brand">Sony Samsung</div>

Answer 5

があります関数を受け取りjQuery.htmlのオーバーロード、あなたがここでそれを十分に活用することができます。

$('.brand').html(function(i,text){ 
 
    var s = ""; 
 
    if(text.indexOf("Sony") > -1) 
 
    s += "<img src=\"https://placeholdit.imgix.net/~text?txtsize=15&txt=Sony&w=150&h=50\">"; 
 
    if(text.indexOf("Samsung") > -1) 
 
    s += "<img src=\"https://placeholdit.imgix.net/~text?txtsize=15&txt=Samsung&w=150&h=50\">"; 
 
    return s; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="brand">Sony</div> 
 
<div class="brand">Samsung</div> 
 
<div class="brand">Sony Samsung</div>

Answer 6

お試しください...このdivのテキストとdivの画像の名前を同じにします（このSony.jpg、Samsung.jpg、Sony_samsungなど）。JPG）

<script type="text/javascript"> 
    var text=$(".brand").text(); 
    $(".brand").html('<img src='+text+'.jpg'/> 
</script> 

Answer 7

brandsを交換したい情報が含まれていると呼ばれるオブジェクトを作成します。すべてのブランド.brandをループその後

var brands = {'Sony':'<img src="image1.jpg"/>','Samsung':'<img src="image2.jpg"/>','Sony Samsung':'<img src="image1.jpg"/><img src="image2.jpg"/>'}; 

を、あなたがテキストから取得するのparamに仮定して交換してください：

$('.brand').each(function(){ 
    $(this).html(brands[$(this).text()]); 
}) 

これが役に立ちます。

var brands = {'Sony':'<img src="image1.jpg"/>','Samsung':'<img src="image2.jpg"/>','Sony Samsung':'<img src="image1.jpg"/><img src="image2.jpg"/>'}; 
 

 
$('.brand').each(function(){ 
 
    $(this).html(brands[$(this).text()]); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="brand">Sony</div> 
 
<div class="brand">Samsung</div> 
 
<div class="brand">Sony Samsung</div>

Answer 8

ここでは、あなたのケースのために働く必要があり、一般的なソリューションです：

それはあなたがしたいすべての画像で動作し、あなたが大文字かどうかを使用する場合は問題ではありません。 。新しいブランドイメージをbrandImagesオブジェクトに追加するだけです。

var brandImages = { 
 
\t "sony" : 'http://flash.sonypictures.com/shared/global/images/sonypictures_share_200x200.jpg', 
 
\t "samsung" : 'http://www.samsung.com/us/images/common/samsung_logo_seo.jpg' 
 
} 
 

 
$('.brand').each(function() { 
 
\t var $this = $(this); 
 
\t var elems = $this.html().split(' '); //obtain the different brands 
 
\t $this.html(''); //clean the html wrapper 
 
\t $.each(elems, function (index, value) { 
 
\t \t $this.append('<img src="'+brandImages[value.toLowerCase()]+'" />') //append each image each image 
 
\t }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="brand">Sony</div> 
 
<div class="brand">Samsung</div> 
 
<div class="brand">Sony Samsung</div>