3

jqueryクリックイベントで初めて値を取得しましたが、2回目は空になります

JS:

$(".topPanel").live('click', (function(e) {

    form = $(e.target).attr("name");
    content = $("." + form);    
    $(".show_panel1").html("");
    $(".show_panel1").html(content);
    $(".show_panel1").show();

}));

HTML:

 <div class="topPanel"  >
   <span id="5" name="panther" style="background: #990000;" class="span_1">  
                   Panther</span>
   <span id="6" name="lion" style="background: #009900;" class="span_1">
                   Lion</span>         
 </div>

 <div class="show_panel1" >
     <label class="label">welcome</label>
 </div>
 <div class="tiger" >
     <label  class="label">i am panther</label>
 </div>
 <div class="lion" >
     <label  class="label">i am lion</label>
 </div>​

CSS

.label
{
    font-family: Verdana; 
    font-size: medium;
    font-weight:lighter; 
    color: #FF990000;
    float:inherit;
    margin:10mm;
}

.topPanel
{
    float: left; 
    color:#000000;
    background: none repeat scroll 0% 0% orange; 
    width: 1280px;
    margin: 10px 5px 5px 10px;
}

.span_1
{
   float: left; 
    height: 40px; 
    width:5%; 
    padding:20px;
    margin: 0px 5px 0px 0px;
}

</p>

4

3 に答える 3

2

jsBin デモ

$(".topPanel").on('click', 'span', function(){

    var form = $(this).attr("name");
    var content = $("." + form).html();    
    $(".show_panel1").html(content).show();

});

PS: なぜ必要なのかわかりませんが.show()、ここにあります!

于 2012-09-24T22:50:59.950 に答える
1

次の 2 行は意味がありません。

content = $("." + form);    
$(".show_panel1").html(content);

contentjQuery オブジェクトです。jQuery オブジェクトを別のオブジェクトの html に配置することはできません。おそらくあなたは次のことを意味しました：

var content = $("." + form);    
$(".show_panel1").html(content.html());

これにより、コンテンツ オブジェクトから HTML が取得され、 に配置され.show_panel1ます。注意してください、content変数を暗黙のグローバル変数にするのではなく、ローカル変数として宣言しましたが、これは悪いことです。

class="form"ここで実際に何をしようとしているのかを確認できるように、含まれている HTML を見せてください。

また、.live()非推奨になりました (使用しないでください)。.on()(最近のバージョンの jQuery の場合) または.delegate()(古いバージョンの jQuery の場合) に置き換えます。

于 2012-09-24T22:44:27.903 に答える
0

これが犯人のようです

$(".show_panel1").html(content);

セレクターをHTMLに渡していました

そのはず

$(".show_panel1").html(content.html());

また<div class="tiger" >

あるはずです <div class="panther" >

存在しないトラのクラスを呼び出そうとしています

更新されたすべての変更を加えたこのFIDDLEを確認してください

于 2012-09-24T22:46:11.287 に答える