检查字符串是否等于某些东西,然后用img替换

时间:2016-12-09 15:08:50

标签: javascript jquery html

尝试找出正确的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.**

我一直在测试以下行,但无法覆盖所有案例。

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

8 个答案:

答案 0 :(得分:3)

有一个jQuery.html的重载需要一个函数,你可以在这里好好利用它:

&#13;
&#13;
$('.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;
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

这是解决您所述问题的答案:

&#13;
&#13;
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;
  }
});
&#13;
<div class="brand">Sony</div>
<div class="brand">Samsung</div>
<div class="brand">Sony Samsung</div>
&#13;
&#13;
&#13;

但是,您陈述的用例非常脆弱,上述解决方案会在您的需求发生变化时崩溃。这个版本更进一步,检查索尼,三星或两者是否在标签内的任何位置,所以它不一定是完全匹配:

&#13;
&#13;
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' />";
  }
 
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

我想我不会得到你,但你想要的是这样吗?

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

答案 3 :(得分:0)

&#13;
&#13;
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+">");
  }
})
&#13;
.resize {
    width: 75px;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

创建一个名为brands的对象,其中包含您要替换的信息:

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

然后循环遍历所有品牌.brand并将假设替换为您从文本中获得的参数:

$('.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>

答案 5 :(得分:0)

这里是一个适合您案例的通用解决方案:

它适用于您想要的所有图像,如果您使用大写字母则无关紧要。只需将新品牌形象添加到brandImages对象。

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

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

答案 6 :(得分:-1)

也许会有所帮助:

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

演示:

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

但是如果没有JS,你能做到吗?只需在开头用img替换文本

答案 7 :(得分:-1)

尝试一下......将div中的文本和此div的图像名称相同(如Sony.jpg,Samsung.jpg,Sony_samsung.jpg)

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