javascript - 如何检查项目属性并使用 jQuery 将其交换为图像？

Question

我有一个项目列表，每个项目都有一个包含位置列表的属性。

我基本上想做的是某种类型的“if 语句”（我假设）来检查“容器”属性，换出文本并用图像替换它。

因此，如果容器属性为“英国，西班牙”，我想说，如果容器属性等于“英国”，则删除文本并替换为英国国旗的图像。因此，如果属性包含多个位置，而不是文本，它将包含每个位置标志的图标。出于演示目的，我包括以下内容；

$('.location.container').attr('location');

对此的任何帮助将不胜感激。

Answer 1

试试这个：链接

html:

<div class="location-container" Location="Spain">
  <div class="text-container">United Kingdom, Spain</div>
</div>

<div class="location-container" Location="United Kingdom">
  <div class="text-container">United Kingdom, Spain</div>
</div>

JS

$('.location-container').each(function(){


  if( $(this).attr('Location').toString().indexOf("United Kingdom")!=-1) {
   $(this).find('.text-container').text(  
   $(this).find('.text-container').text().replace('United Kingdom','<img src="http://northcyprusfreepress.com/wp-content/uploads/2011/06/flag_icon_uk.gif"/>'));
 //   $(this).find('.text-//container').html($(thi//s).find('.text-container').text());


  }
if($(this).attr('Location').toString().indexOf("Spain")!=-1) {

  $(this).find('.text-container').text(  $(this).find('.text-container').text().replace('Spain','<img src="http://www.images2.welproma.com/spain_flag_icon.png"/>'));



  }
   $(this).find('.text-container').html($(this).find('.text-container').text());
});

Answer 2

尝试 ：

jQuery数据

HTML：

<span data-name = "United Kingdom" data-location = "Europe">XYZ</span>
<span data-name = "United States" data-location = "America">XYZ</span>

Javascript：

var location = $('.location.container').data('location');
//similarly also get name = $('.location.container').data('name'); 

if(location === "United Kingdom"){
//replace flag
}
else{
//retain flag
}

Answer 3

<div class="location">
  <span class="text">United Kingdom</span>
</div>

$(".location").each{
  function(){
    var text = $(this).closest(".text");
    text.hide();
    var flagUrl = 'http://blabla/flags/' + text.text() + '.jpg'; 
    $(this).append('<img />').attr('src', flagUrl );
  }
}

如果有多个位置，您还必须拆分“文本”，并对其进行迭代，但这应该可以帮助您入门。

Answer 4

假设你有一张国家地图：

var flags = {
    "United Kingdom": "/images/uk.gif",
    "Spain": "/images/spain.gif"
}

$('.location.container').each(function() {
    var locations = $(this).attr('location').split(/,\s*/);

    for (var i = 0, n = locations.length; i < n; ++i) {
        $(this).append('<img src="' + flags[locations[i]] + '" />');
    }
});