Question

以下code将：

测试div中的字符是否超过十个字符
将文字缩短为少于十个字符
将...附加到div
在悬停时，它会显示并隐藏旨在显示全文的div

一旦我发现其中一个问题，我编辑了这个

到目前为止它只适用于第一个div而没有其他

<html>

<head>

<title>limit chars 1</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>


<script type="text/javascript">

  $(document).ready(function() {


      $("#div2").hide();

var elem = $("#div1");
var fn1 = function(){ $('#div2').show();};
var fn2 = function(){ $('#div2').hide();};


    if(elem){
        if (elem.text().length > 10)
         elem.text(elem.text().substr(0,12)


    )}

    if(elem){
    if (elem.text().length > 10) 
    elem.text(elem.append("...")
   )};





    if(elem){
    if (elem.text().length > 10) 
    //elem.text(elem.append("...")


  $(elem).mouseover(fn1).mouseout(fn2);



   };


//$(elem).mouseover(fn1).mouseout(fn2);

  });//end
</script>

<style>

#div2{color:blue; }

</style>




</head>


<body>

this is where the fun begins.
<div id="div1">
12345ebfkqbweub qiuweiu 
</div>
<div id="div2">full text in tooltip</div>


</body>



</html>

Answer 1

尝试在if (elem.text().length > 10)区块中分配事件处理程序。

if(elem){
    if (elem.text().length > 10)
        elem.text(elem.text().substr(0,12));
        elem.mouseover(fn1).mouseout(fn2);
    }

    ...

要处理多个div，您需要使用jQuery.each函数：http://api.jquery.com/each/

$( '.someclass' ).each( function( ) {
    // do your work in here, $(this) refers to the current element
} );

Answer 2

在弄乱了这个工作之后：想到我会分享并让世界变得更美好：

 $(document).ready(function(){
    //each iterates through all divs 



        $("div").each(function(){

        var $div = $(this);
        var $fC = $div.children("p:first-child");
        //show hide functions in vars
        var fn1 = function(){ $('#div2').show();};
        var fn2 = function(){ $('#div2').hide();};

    var loadedText="This is the full long name."

    //hide tooltip
        $("#div2").hide();

       ///conditional to ensure tooltip only shows up for shortened text and appdens only when >10
      if ($fC.text().length > 10) 
            {
                //alert("test");
                $fC.html($fC.html().substring(0,14));
                ($fC).append("[...]");
                //show hide
                ($fC).mouseover(fn1).mouseout(fn2);


            }


        //set tooltip position to follow mouse 
        $(document).mousemove(function(e){
          //$('#div2').html(e.pageX +', '+ e.pageY);
          $("#div2").css({ top : e.pageY + 5, left: e.pageX +5  }); 
           }); 




        //place content into div2

        //from another div class
        //$("#div2").text($(".foo").text());
        //from variable -content can be loaded there 
    $("#div2").text(loadedText)

        });//end each



    });//end main

    </script>

在div中缩短字符的工具提示

2 个答案: