3

我不知道标题是否很好地解释了这种情况。下面是我编写的用于在按下按钮时创建 div 元素的代码。然后通过单击任何创建的 div，我们可以通过从下拉框中选择颜色来更改 div 背景。但是，如果我单击另一个 div 并尝试通过从下拉列表中选择另一种颜色来更改颜色，则先前单击的 div 也会受到新颜色的影响。为什么会这样。我只希望选中的 div 改变颜色，而不影响之前点击的 div。我在这个网站上阅读了很多线程，其中一些谈到了取消绑定点击，但我无法解决问题。谢谢您的帮助。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 

<style> 
.aaa { width:100px; height:100px;background-color:#ccc;margin-bottom:5px;}
p{widht:500px; height:500px; margin:0px; padding:0px;border:2px solid red;color:#000;}
</style>

<select id="item_select" name="item"> 
    <option value="1">red</option> 
    <option value="2">blue</option> 
    <option value="3">green</option> 
</select>

<button>Click to create divs</button>
<p id="ptest"></p>


<script type="text/javascript">
var dividcount = 1;
$("button").click(run);
function run(){
 var myDiv = $('<div id=lar'+dividcount+' class=aaa></div>');
 $(myDiv).clone().appendTo('#ptest');
 $(dividcount++);
 $("div").bind('click',(function() {
  var box = $("div").index(this);
  var idd = (this.id);
  $("#"+idd).text("div #"+idd);
  $("select").change(function(){
   var str= $("select option:selected").text();
   $("#"+idd).css("background-color",str);
  });
 }));
}; 
</script>
4

3 回答 3

0

改变这个：

$("select").change(function(){
   var str= $("select option:selected").text();
   $("#"+idd).css("background-color",str);
});

对此：

$(this).find("select").change(function()
    var str= $(this).find("option:selected").text();
    $("#"+ idd ).css("background-color",str);
});

我看到的问题是，每次单击 div 时，都会将更改处理程序绑定到页面上的所有选择。使您的代码代码搜索单击的 div 中的选择，而不是页面上的所有选择。

于 2011-01-03T01:16:22.047 回答
0

完成的例子： http: //jsfiddle.net/fUHFp/1/ （如果我明白你的意图）

通过做这个：

$("div").bind('click',(function() { 
    // ...

每次单击时，您都会为页面上的每个分配 一个单击事件。divbutton

我假设您只想将其分配给新创建的。

而不是这个：

$("div").bind('click',(function() {
  var box = $("div").index(this);
  var idd = (this.id);
  // ...

做这个：

myDiv.bind('click',(function() {
  var box = $("div").index(this);
  var idd = (this.id);
  // ...

所以你只绑定到新<div>元素。

正如@karim79 指出的那样change()，您在其中绑定的事件也会发生同样的情况。click

另外，这一行：

$(dividcount++);

……没有意义。您不需要将所有内容都包装在 jQuery 对象中。

只需这样做：

dividcount++;

此外，您不需要克隆<div>刚刚创建的文件，因为您没有保留原始文件。而且您不需要包装myDivjQuery 对象，因为它已经是一个。

所以这：

 $(myDiv).clone().appendTo('#ptest');

...可能是这样的：

 myDiv.appendTo('#ptest');

编辑：关于.change()事件，当您更改<select>. 如果是这样，那不是这样做的方法。

您应该aaa在change()处理程序中按类名选择这些 div 来设置颜色。

因此，将change处理程序run()完全从函数中取出，并将其更改为：

$("select").change(function(){
   var str= $(this).find("option:selected").text();
   $(".aaa").css("background-color",str);
});

此外，没有理由为处理程序中已有的元素重建选择器click()。您可以传递this给 jQuery 对象。

所以这：

$("#"+idd).text("div #"+idd);

应该是这样的：

$(this).text("div #"+idd);
于 2011-01-03T01:19:05.750 回答
0

我已经设置了一个小提琴@ http://jsfiddle.net/BUghk/

你的代码让我的眼睛流血了。所以我冒昧地重写了它:)

于 2011-01-03T01:27:15.513 回答