Question

我有这个功能

function doSomething(elementID) {

    $("div").append("<p id='"+ elementID +"'> A paragraph</p>");

    /* this part is incorrect since it will 
       use the selector whose id is "elementID" and not the parameter passed. */

    $("p#elementID").css("color", "red");
}

我想做这样的事情，但这显然是不正确的。如何使用ID参数来使用或存储选择器？

这样的事情（但这也是不正确的）：

var x = $("# '"+elementID+");

Answer 1

有两种方法可以做到这一点。第一种是使用字符串连接 - 与创建元素时完全一样：

function doSomething(elementID) {
  $('div').append('<p id="' + elementID + '"> A paragraph</p>');
  $('p#' + elementID).css('color', 'red');
}

第二个，更优选的IMO，是保留对您创建的元素的引用，然后在appendTo()的第二个语句中使用它：

function doSomething(elementID) {
  $('<p id="' + elementID + '"> A paragraph</p>').css('color', 'red').appendTo('div');
}

另请注意，最好使用CSS类来设置元素的color。应尽可能避免使用css()，因为它将UI和JS代码紧密地联系在一起。

Answer 2

请检查以下示例。你需要改变：

$("p#elementID").css("color", "red");

到

$("p#"+ elementID).css("color", "red");

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var elementID = "myid";
    $("div").append("<p id='"+ elementID +"'> A paragraph</p>");

    /* this part is incorrect since it will 
       use the selector whose id is "elementID" and not the parameter passed. */

    $("p#"+ elementID).css("color", "red");
});
</script>
</head>
<body>
<div>
</div>

</body>
</html>

希望这会对你有所帮助。

jQuery使用元素ID作为函数的参数作为选择器

2 个答案: