尝试找出正确的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' />");
答案 0 :(得分:3)
有一个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;
});
&#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;
答案 1 :(得分:2)
这是解决您所述问题的答案:
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;
但是,您陈述的用例非常脆弱,上述解决方案会在您的需求发生变化时崩溃。这个版本更进一步,检查索尼,三星或两者是否在标签内的任何位置,所以它不一定是完全匹配:
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;
答案 2 :(得分:0)
我想我不会得到你,但你想要的是这样吗?
if($('.foo').text() == 'sony') $('.foo2').html('<img/>');
&#13;
答案 3 :(得分:0)
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;
答案 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>