Question

我从函数中获取一个值并尝试将其作为Jquery中的选择器传递。 JQUery不接受我传递的字符串

var make = function() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

  for (var i = 0; i < 5; i++)
  text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
};
var makeimg = function() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

  for (var i = 0; i < 5; i++)

  text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;

};
var a = make();
var b = makeimg();

var making = '#' + a;
var makingimg = '#' + b;

$("body").append("<div id=" + making + "><img id=" + makingimg + ">     </div>");

alert(makingimg);

//set img to image tag
$(makingimg).attr("src", '/img/someimage.png');
$(makingimg).attr("width", '200px');

警报显示正确的值，当我运行一种类型的函数时，它是一个字符串，但当我将它作为选择器传递时，它不会抓取DOM元素。

以下是带有代码的JSBin。

Answer 1

您正在使用哈希设置ID，因此您最终会使用

<div id="#dsadAs"><img id="#dsawqQ"></div>

等。将其更改为

$("body").append("<div id=" + a + "><img id=" + b + ">     </div>");

Answer 2

虽然其他答案涉及前面有无关#的ID，但我想提供一种构建HTML的替代方法，您不需要查找该元素在追加它之后：

var a = make();
var b = makeimg();

//create a new div element
var d = $("div");
//create a new img element
var i = $("img");

//set up attributes on both
d.attr('id', a);
i.attr({
    'id': b,
    'src': '/img/someimage.png',
    'width': '200px'
});

//append the image to the div...
d.append(i);
//...and the div to the body
$("body").append(d);

如果您仅使用ID来查找要设置src和width属性的元素，那么您甚至不需要a / {现在{1}}变量和b属性。

Answer 3

问题是因为您为所创建的元素分配了id属性以包含#，例如id="#foo"，这是不正确的。您需要从这些属性中删除#。

另请注意，make()和makeimg()功能完全相同，因此可以删除一个功能。此外，您在src上设置了div - 这应该在img上，而width应该是一个整数。试试这个：

var make = function() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    for (var i = 0; i < 5; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));    
    return text;
};

var a = make();
var b = make();    
$("body").append("<div id=" + a + "><img id=" + b + "></div>");
$('#' + b).attr({
    src: '/img/someimage.png',
    width: 200
});

您还可以在创建元素时设置属性，并且无需再次查询DOM：

$("body").append('<div id="' + a + '"><img id="' + b + '" src="/img/someimage.png" width="200"></div>');

Answer 4

你的元素＆＃39; ID不应以#开头。只有选择器应该：

var divId = make();
var imgId = makeimg();

$("body").append("<div id=" + divId + "><img id=" + imgId + ">     </div>");

//set img to image tag
$( '#' + divId ).attr("src", '/img/someimage.png');
$( '#' + imgId ).attr("width", '200px');

Answer 5

创建div时，在前面添加一个带有哈希的id。您不应该这样做，只有jQuery选择器获取哈希值，请参阅https://api.jquery.com/id-selector/

相反，这样做：

var making = a; // remove hash
var makingimg = b; // remove hash

$("body").append("<div id=" + making + "><img id=" + makingimg + ">     </div>"); // ids added without hash

alert(makingimg);

//set img to image tag
$('#'+makingimg).attr("src", '/img/someimage.png');  // add hash to refer to the element
$('#'+makingimg).attr("width", '200px'); // add hash to refer to the element

传递函数返回JQuery选择器

5 个答案: