Question

以下代码有效，但我怀疑有更清洁。

任何替代引用选择器名称，特别是第一个不同的？

的jQuery

$(".add_one_more").click(function(){            
            var themsg = $(this).parent().attr('id');            
            $('"#'+themsg+'"').stop().fadeOut("slow",function(){                
                $("#entry_area").stop().fadeIn("slow");
            });

            return false;             
        });

HTML

<div id="entry_area">Form Goes Here</div>
<div id="msg0">
    <span style="font-size: 130%; color: green;">One Message</span>
    <a href="" class="add_one_more">Try Again</a>
</div>
<div id="msg1" style="width: 550px;">
    <span style="font-size: 130%; color: red;">Another Message</span>
    <a href="" class="add_one_more">Try Again</a>
</div>

Answer 1

您不需要选择父级并获取其ID。

    $(".add_one_more").click(function(){                      
        $(this).parent().stop().fadeOut("slow",function(){                
            $("#entry_area").stop().fadeIn("slow");
        });

        return false;             
    });

Answer 2

我非常喜欢你正在做的事情，但是我会添加自己的想法，让你的js更有弹性来移动部件。

JS

$("#entry_area, div.message").bind("stop", function(evt){
   $(this).stop().fadeIn("slow");
} );

$(".add_one_more").click(function(evt){   
  $(this).closest("div.message").trigger("stop");
  $("#entry_area").trigger("stop");      
            return false;             
        });

HTML

<div id="entry_area">Form Goes Here</div>
<div id="msg0" class="message">
    <span style="font-size: 130%; color: green;">One Message</span>
    <a href="" class="add_one_more">Try Again</a>
</div>
<div id="msg1" class="message" style="width: 550px;">
    <span style="font-size: 130%; color: red;">Another Message</span>
    <a href="" class="add_one_more">Try Again</a>
</div>

Answer 3

实际上，如果你不重复使用它，我会说你不需要存储id，试试：

$(".add_one_more").click(function(){            
        var $parent = $(this).parent();            
        $parent.stop().fadeOut("slow",function(){                
            $("#entry_area").stop().fadeIn("slow");
        });

        return false;             
    });

甚至更短，而不将jquery对象存储在var中（[编辑]这正是Daniel在写这篇文章时发布的内容。）

Answer 4

怎么样

var themsg = $(this).parent();
themsg.stop() ...

更清晰的方式来引用选择器名称

4 个答案:

JS

HTML