javascript - 基于 td 元素 .text() 值访问具有 css 背景图像存储值的对象

Question

我检查了其他答案，但没有发现任何相似之处。我不确定我的方法是否可行。

我有一个 CRUD 应用程序，所有 PHP 和 SQL 代码都运行良好。根据用户输入，它会获取所查询食物的食物值。

食物名称放在 td 元素中。

我想要的是根据 td 元素 .text() 方法的 jQuery 值添加背景图像。

这是 HTML，它都是在服务器端生成的:

             <tr>
                <th>#</th>
                <th>Food Name</th>
                <th>Calories/100g</th>
                <th>Proteins</th>
                <th>Carbohydrates</th>
                <th>Fats</th>
                <th>Time_to_burn_by_running</th>
            </tr>

我像这样获取 td 元素的当前值:

var currentFood = $('td:eq( 1 )').text(); //cache it
alert(currentFood); // test it, works fine

我将背景图片存储在这个对象中:

var imgSources = { 

almond: "https://www.vigon.com/wp-content/uploads/2015/04/almonds.jpg",
banana: "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3-
1020x765.jpg", 
cereal: "http://nutryvidasaude.com.br/Imagens/Produtos/240420170917331.jpg",

 };

现在，我显然可以对每个食物选择和函数中的硬代码进行 if 评估，但这并不好，而且违反了所有 DRY 原则。

这是我尝试的方法，我不确定是否可以像这样连接起来。

$(function(){
if(jQuery){
/* alert("i am here"); */
}

if($('table').length == 0) {
alert("table is not generated yet");
}
else {
$('table').prop('id', 'mainTable');
var reso = $('#mainTable').attr('id')

alert("table id is "+ reso);

// this is the relevant part
var currentFood = $('td:eq( 1 )').text();
alert(currentFood); 
alert(imgSources.cereal); // testing what is returned.
 if($('table').length > 0) { $('#mainTable').fadeOut(100, function() {
$('#mainTable').fadeIn(2000);

// this one does not work
$('#mainTable').css('background-image', 'imgSources + "." + 
currentFood').fadeIn(3000);
});} 


}
});

控制台中没有错误消息。这只是一个串联问题吗？如果我这样做:

$('#mainTable').css('background-image', 'someurl').fadeIn(3000);

然后就可以了。

我在服务器上运行它，我希望它在没有 fiddle /codepen 的情况下就足够好了

Answer 1

问题是因为 imgSources 是一个变量，所以您不能将它包含在字符串中 - 您需要将它与您尝试访问的属性一起连接起来。

您还需要使用括号表示法来访问该对象，因为您已将属性名称存储在 currentFood 变量中。试试这个:

var imgSources = {
  almond: "https://www.vigon.com/wp-content/uploads/2015/04/almonds.jpg",
  banana: "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3-1020x765.jpg", 
  cereal: "http://nutryvidasaude.com.br/Imagens/Produtos/240420170917331.jpg",
};

var currentFood = $('#mainTable td:eq(1)').text();
$('#mainTable').css('background-image', 'url(' + imgSources[currentFood] + ')').fadeIn(3000)

#mainTable {
  height: 300px;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mainTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Food Name</th>
      <th>Calories/100g</th>
      <th>Proteins</th>
      <th>Carbohydrates</th>
      <th>Fats</th>
      <th>Time_to_burn_by_running</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>almond</td>
      <td>550</td>
      <td>18</td>
      <td>14</td>
      <td>48</td>
      <td>55 </td>
    </tr>
  </tbody>
</table>