javascript - 我无法使用动态路径名将文件路径中的图像附加到动态创建的 div 中

Question

我正在尝试用不断变化的图像动态填充 div。我正在尝试通过更改路径名来做到这一点。然而，每当我查看为路径生成的 html 代码时，它都不会添加/，尽管我已将其与文件名的其余部分连接起来(请参阅附加的代码)。

我尝试重写我连接的字符串，隔离/字符。

 function displayFighterbox()
{
    alert(whoseturn.name);
    if(whoseturn.name=='firstPlayer')
    {
        $('#walunguWeapon').append('<div class="playerBox" >play</div>');
        $('#walunguWeapon').append('<div><img src:"image/'+whoseturn.weapon+'.png"></div>');
    }
    if(whoseturn.name=='secondPlayer')
    {
        $('#fanjanoWeapon').append('<div class="playerBox"> Play </div>');
        $('#fanjanoWeapon').append('<div><img src:"image/"'+whoseturn.weapon+'.png></div>');
    }
}

我希望代码在第一个 div 之后附加一个图像(顺便说一下，它工作得很好)。但由于路径连接不正确，图像没有显示。

Answer 1

假设文件路径本身是正确的，您有两个问题。首先 src:"image... 需要是 src="image...。其次，HTML 中的引号会不匹配，需要修复。

另请注意，除了选择器之外，条件的两边都是相同的，因此您可以使用三元来干燥此逻辑。此外，单个 append() 调用的性能优于两个单独的调用。

function displayFighterbox() {
  var selector = whoseturn.name == 'firstPlayer' ? '#walunguWeapon' : '#fanjanoWeapon';
  $(selector).append('<div class="playerBox">play</div><div><img src="image/' + whoseturn.weapon + '.png"></div>');
}