Question

好的，所以基本上我只想创建一个简单的函数来改变已被点击的div的CSS值。选定的div（$（this））将传递给divClicked函数。我可以在这里调用CSS jQuery函数，但我想在另一个函数中执行实现。

$('#container').children().click(function(){
    divClicked($(this));
});

但在divClicked函数中，当我在div变量上运行jQuery函数时，它不起作用......任何想法我做错了。

function divClicked(selectedDiv)
{
    $(selectedDiv).css('background', 'red');
}

Answer 1

你在做什么连接？如果它位于实际“容器”script上方的div标记中，并且您没有将其包含在某种ready回调或类似内容中，则可能是问题所在。或者，如果你之后将div添加到div中（因为你正在使用click，它只会将处理程序挂接到那里的子句）。

因为如果“容器”div及其子代已存在，则代码可以正常运行：

HTML：

<div id='container'>
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>
<input type='button' id='btnAdd' value='Add a new child'>

JavaScript的：

$('#btnAdd').click(function() {
  $("#container").append("<div>New child, clicking me <em>won't</em> work</div>");
});

$('#container').children().click(function(){
  divClicked($(this));
});

function divClicked(selectedDiv)
{
   // You don't want `$` here, but I've left it just to demonstrate
   // that your code should, largely, be working
   $(selectedDiv).css('background', 'red');
}

Live copy

...但请注意，之后添加的元素不会起作用，因为当你挂钩时它们不存在。

修复它将取决于什么是错误的。它可能只是将您的连接代码包装在ready处理程序中（就像我在该示例中那样）或将其移动到页面底部的script标记中的代码，就在关闭之前</body>代码（作为YUI folks recommend），或者可能使用live或delegate。

Answer 2

您的代码应该有效。见this。你的HTML中有什么东西我们不知道吗？

但是作为一个注释，当你传递$(this)时，你已经传递了一个jQuery对象。然后再次将其包装为jQuery对象。而只使用selectedDiv。或者，通过this并使用$(selectedDiv)。

Answer 3

我认为无论如何“justkt”建议它会起作用。

您为CSS样式尝试过“background-color”吗？

Answer 4

使用此jquery代码来避免错误。所以没有现场活动

$(document).ready(function(e) {
$('#btnAdd').click(function() {
    $("#container").append("<div>New child, clicking me <em>won't</em> work</div>");
});

$(document).delegate('#container div', "click", function(){divClicked(this);});

var divClicked=function(selectedDiv) {
    $(selectedDiv).css('background', 'red');
};

}）;

<div id='container'>
  <div class="1">Child 1</div>
  <div class="2">Child 2</div>
  <div class="3">Child 3</div>
</div>
<input type='button' id='btnAdd' value='Add a new child'>

jQuery函数参数

4 个答案: