javascript - PHP 查询数据库

Question

我有两个容器，第一个是包含玩家姓名的表单(选择)，第二个是与这些玩家相关的图像。当用户更改选择值时，图像也会更改为该特定玩家图像。

我在 JQuery 中创建了这个，一切都很好，但随着玩家数量的增加，我决定研究数据库。

为了更好地理解，这里是我在 JQuery 中的简短版本。

<select id="clubPlayers" name="clubPlayers"></select>

var PLAYER_NAMES = [
    "Player 1",
];

var players = '';
for (var i=0;i<PLAYER_NAMES.length;i++){
    players += '<option value="'+ PLAYER_NAMES[i] + '">' + PLAYER_NAMES[i] +     '</option>';
    PLAYER_NAMES.sort();
}
$('#clubPlayers').append(players);

// Players
$('#clubPlayers').on('change', function() {
    $('.player-img>img').remove();
    if ( this.value == 'Player 1'){
        $(".player-img").append("<img src='players/player_1.png'>");
    }
});

现在我想在 PHP 和 Mysql 中重新创建它。我创建了一个数据库，该数据库由3列组成，它们是“id”“player_name”和“player_image”。(player_image 将作为图像链接输入)

我已经能够查询数据库并将player_name的字段作为选择元素进行循环。

<?php

$conn = new mysqli('localhost', 'root', '', 'players') 
or die ('Cannot connect to db');

$result = $conn->query("SELECT id, player_name, player_image FROM player_info");


echo "<select id='clubPlayers' name='clubPlayers'>";

while ($row = $result->fetch_assoc()) {

              unset($id, $player_name, $player_image);
              $id = $row['id'];
              $player_name = $row['player_name']; 
              $player_image = $row['player_image']; 
              echo '<option value="'.$player_name.'">'.$player_name.'</option>';

}

echo "</select>";

?>

效果很好，但我仍然需要从数据库获取玩家图像链接并使用该链接创建一个 img 标签。

我的问题是，这个(JQUERY)可以吗

$('#clubPlayers').on('change', function() {
    $('.player-img>img').remove();
    if ( this.value == 'Player 1'){
        $(".player-img").append("<img src='players/player_1.png'>");
    }
});

重新创建并添加到我上面现有的 PHP 中。

Answer 1

您需要将图像的数据存储在元素上。

$player_image = $row['player_image']; 
echo '<option value="'.$player_name.'" data-image="'. $player_image .'">'.$player_name.'</option>';

在 jQuery 中，您可以从所选选项访问它...

$('#clubPlayers').on('change', function() {
  var image = $(this).data('image');
  $('.player-img>img').remove();
  $(".player-img").append("<img src='players/"+ image +"'>");
});

所选选项应该在上下文中的$(this)中可用。如果没有，您需要将 .find(selectedValue) 添加到数据行中。