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/BUghk/をセットアップしました

あなたのコードは私の目を出血させました。だから私はそれを書き直す自由を取った:)

于 2011-01-03T01:27:15.513 に答える
0

完成例: http://jsfiddle.net/fUHFp/1/ (あなたの意図が理解できれば)

これを行うことにより：

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

がクリックされるたび divに、ページ上のすべてにクリックイベントを割り当てていbuttonます。

新しく作成したものに割り当てたいだけだと思います。

これの代わりに：

$("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>また、オリジナルを保持していないため、作成したばかりのクローンを作成する必要はありません。myDivまた、jQuery オブジェクトは既に 1 つであるため、ラップする必要はありません。

したがって、この：

 $(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()ハンドラー内に既にある要素のセレクターを再構築する理由はありません。thisjQuery オブジェクトに渡すことができます。

したがって、この：

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

これである必要があります：

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