Подсказка с укороченными символами в div - PullRequest
Новая
       5

Подсказка с укороченными символами в div

0 голосов
/ 06 марта 2012

Следующие code будут:

  1. Проверка, чтобы увидеть, если длина символов в div превышает десять символов
  2. Сократить текст до десяти символов
  3. Добавить ... к div
  4. При наведении курсора будет отображаться и скрываться 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>

Ответы [ 2 ]

0 голосов
/ 16 августа 2012

После возни это сработало: думал, что поделюсь и сделаю мир лучше: 

 $(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>
0 голосов
/ 07 марта 2012

Попробуйте назначить обработчики событий в вашем блоке 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
} );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...