All geek questions in one place

Criticism of using jQuery

I introduce myself in jQuery by introducing a small system where onmouseover on an element causes a text balloon to pop up next to the element. I feel like I'm using too much vanilla JS here, so please suggest where I can improve and what's wrong with this code:

<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>
+3
source share
5 answers
$(function() {
    $("span.balloon").hide();

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

-, , vanilla js, , . jQuery javascript. , , jQuery 1) , , 2) , .

, jQuery CSS .

+5
$('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" ) - .

+2

jQuery , , . , : jQuery BeautyTips. .

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

Source: https://habr.com/ru/post/1711431/

More articles:


All Articles