Question

我想要在右键单击div的位置上显示div的图像。我无法这样做可能因为我以不正确的方式添加样式。我也在Web控制台中看到一个错误：在我在下面显示的行上显示“属性列表之后”。任何人都可以帮我这个。这是我尝试将图像附加到右键单击位置的div

的行

$("#Boma").append($("<img>", {"src": "Boma.png" ,"style": width:25px; height:20px; position:absolute; left:xCoord; top:yCoord;}))

我已将右键单击坐标存储在xCoord和yCoord中的另一个函数中，这是我代码中的全局坐标。

Answer 1

为此，您可以将style放在一个字符串中，确保正确连接变量：

$('<img />', { 
  'src': 'Boma.png',
  'style': 'width: 25px; height: 20px; position: absolute; left: ' + xCoord + '; top: ' + yCoord + ';'
}).appendTo('#Boma');

或者，您可以在您创建的css()元素上单独调用img方法：

$('<img />', { 'src': 'Boma.png' }).css({
  width: '25px',
  height: '20px',
  position: 'absolute',
  left: xCoord, 
  top: yCoord 
}).appendTo('#Boma');

顺便说一句，我强烈建议你尽可能多地使用类。在您的示例中，应该可以仅内联top和left规则。

Answer 2

您忘记了字符串分隔符和度量单位：

width:25px; height:20px; position:absolute; left:xCoord; top:yCoord;

$("#Boma").append($("<img>", {
    "src": "Boma.png",
    "style": "width:25px; height:20px; position:absolute; left:" +
              xCoord + "px; top:" + yCoord + "px;"
}));

一个例子：

var childLess = ['myTitle'];
var identifiedObjectsList = [];
$("#Boma").on('click', function (e) {
    var clickedItem = $(this).attr('title');
    if (childLess.indexOf(clickedItem) > -1) {
        var concept = clickedItem;
        identifiedObjectsList.push(concept);
        //console.log(identifiedObjectsList);
        $("#Boma").append($("<img>", {
            "src": "https://dummyimage.com/50x50/000/fff",
            "style": "width:25px; height:20px; position:absolute; left:" + 
             e.pageX + "px; top:" + e.pageY + "px;"
        }));
    }
});

#Boma {
    position: relative;
    border-style: solid;
    height: 500px;
    width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="Boma" title="myTitle"></div>

在追加函数

2 个答案: