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＆amp; Mysql的。我创建了一个数据库，该数据库由3列组成，它们是“id”“player_name”＆amp; “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)。

PHP查询数据库

1 个答案: