3

虽然在 jquery click 事件上第一次获得了价值，但第二次它变空了

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

这两行没有意义：

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

content是一个 jQuery 对象。您不能将 jQuery 对象放入另一个对象的 html 中。也许你的意思是：

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

这将从内容对象中获取 HTML 并将其放入.show_panel1. 请注意，我还将变量声明为content局部变量，而不是允许它成为一个不好的隐式全局变量。

请向我们展示包含的 HTML，class="form"以便我们可以看到您在此处实际尝试执行的操作。

此外，.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 回答