Question

我正忙着通过实现一个小系统向jQuery介绍自己，其中元素上的onmouseover导致文本气球弹出靠近元素。我觉得我在这里使用过多的香草JS，所以请建议我可以改进的地方以及这段代码有什么问题：

<head runat="server">
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $('document').ready(function() {
            $('span.balloon').each(function() {
                this.style.display = "none";        
            });      

            $('span.ballooned').mouseover(function(event){
                if (event.currentTarget.attributes["balloonid"]) {
                    var blnArr = $("#" + event.currentTarget.attributes["balloonid"].value);
                    if (blnArr.length > 0) {
                        blnArr[blnArr.length - 1].style.display = "inline";                    
                    };
                };
            });
        });
    </script>
</head>
<body>
    <div>
        This is some text where I describe a <span class="ballooned" balloonId="bln-1">text field</span> and want to attach extra info to that phrase.
    </div>
    <span class="balloon" id="bln-1">nvarchar(8)</span>
</body>

Answer 1

$(function() {
    $("span.balloon").hide();

    $("span.ballooned[balloonid]").mouseover(
        function() {
            var balloonid = "#" + $(this).attr("balloonid"); 
            $(balloonid).css("display", "inline");
        });
});

Answer 2

首先，让我说使用vanilla js，如果您确定它不依赖于浏览器则没有任何问题。 jQuery框架并不是要替换任何和所有javascript语法。我想大多数人会说jQuery旨在解决一个长期存在的问题，即迫使开发人员处理我们无法控制的浏览器战争; 2）简化为满足当天需求而经常需要的复杂任务

那就是说，我建议您使用jQuery's CSS函数来设置属性。

Answer 3

$('document').ready(function() {

    $('span.balloon').hide();

    $('span.ballooned').mouseover(function(event){
        if ( this.balloonid ) {
            var blnArr = $("#" + this.balloonid);
            if (blnArr[0]) {
                $( blnArr[blnArr.length - 1] ).css('display', 'inline');              
            };
        }
    });

});

...不确定这是否有用......我想知道：你为什么使用expando属性（“baloonid”） - 它有点突兀和混乱。

Answer 4

jQuery的一部分美妙之处在于，您可以使用任何插件来执行任何操作。本着这种精神，你应该看看我最喜欢的一个插件：jQuery BeautyTips。它很好地装气球。

Answer 5

$('span.ballooned').mouseover(function(e){
  if ($(this).attr("balloonid")) 
    $("#" + $(this).attr("balloonid")).css('display','inline');
});

对jQuery使用的批判

5 个答案: