Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   в чем ошибка (https://javascript.ru/forum/dom-window/53807-v-chem-oshibka.html)

РустамRu 19.02.2015 10:19

в чем ошибка
 
есть вот такой скрипт:
<script type="text/javascript">
	function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);

$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:1, display:"none"}).fadeIn(10);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+0});
}).mouseout(function(){
my_tooltip.fadeOut(10);
});
});
}
$(document).ready(function(){
simple_tooltip("area","tooltip");
});
</script>

я решил его немного подкорректировать так, чтобы только при условии что id="squidhead0" title принимал class="tooltip", например если id="squidhead2", то title не оформляется или же оформляется но по другому стилю. Так вот я изменил вот так:
<script type="text/javascript">
	function simple_tooltip(target_items){
$(target_items).each(function(){
$("body").append("<div class='parking' id='squidhead0'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#squidhead0");

$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:1, display:"none"}).fadeIn(10);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+0});
}).mouseout(function(){
my_tooltip.fadeOut(10);
});
});
}
$(document).ready(function(){
simple_tooltip("area","tooltip-parking");
});


<div class="parking">

<img src="... alt="" class="map"  usemap="#park" />

<map name="park">

<area id="squidhead0" title="Парковка" alt="Link" coords="5,35, 155,10, 250,70, 285,140, 277,143, 278,190, 335,310, 90,320, " shape="poly" href="#" data-maphilight="{&quot;stroke&quot;:false,&quot;fillColor&quot;:&quot;fdff5a&quot;,&quot;fillOpacity&quot;:0.7}" /> 

</map>
</div>


но вот только не работает, что сделал не так ?

laimas 19.02.2015 10:44

А как она у вас будет работать, если каждому добавляемому div вы указываете одно и тоже значение id - squidhead0, и это при том, что id=squidhead0 уже имеет area?

РустамRu 19.02.2015 10:50

а можете подсказать, как сделать правильно, в java не силен

laimas 19.02.2015 11:05

Значит надо учить, а потом писать, а не действовать "может повезет".

Как в исходном коде формируется ID - по индексу элемента (i) и переданному имени (name):

$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'> ...

Вы имя в функции указываете, но индекс то зачем выбросили и всем добавляете 0? Более того, у вас цикл должен брать индекс + 1, так как area имеет индекс 0 в атрибуте ID. Или измените id у area.

Да и вообще, уж если гонять в цикле, то хотя бы тогда обращений делать меньше надо, а то смрад какой-то.

laimas 19.02.2015 11:17

Почему в функцию передаете два аргумента "area","tooltip-parking", а в самой функции оставили только один?

РустамRu 19.02.2015 11:39

Цитата:

Сообщение от laimas
Почему в функцию передаете два аргумента "area","tooltip-parking", а в самой функции оставили только один?

ориентируясь на исходный скрипт

laimas 19.02.2015 11:39

В общем разбирайтесь с аргументом вторым, а функцию хотя бы так перепишите:
function simple_tooltip(target_items){
    $(target_items).each(function(i){
        $('<div class="parking" id="squidhead'+(i+1)+'"><p>'+this.title+'</p></div>')
            .appendTo('body')
            .mouseover(function(){
                $(this).css({opacity:1, display:"none"}).fadeIn(10);
            })
            .mousemove(function(kmouse){
                $(this).css({left:kmouse.pageX+15, top:kmouse.pageY+0});
            })
            .mouseout(function(){
                $(this).fadeOut(10);
            });
        $(this).removeAttr('title')
    });      
}

laimas 19.02.2015 11:41

>ориентируясь на исходный скрипт

Это каким образом вы на него ориентировались, если в исходнике и передается, и принимается два аргумента?

РустамRu 19.02.2015 11:47

так почему я и написал сюда!

laimas 19.02.2015 11:53

Ну здрасьте, вам что тут аргументы подсчитывать должны?

В исходнике вторым аргументом передается имя, которое будет получать объект. Вы не используете этого, зачем передаете тогда, значит и вызов функции должен быть не:

simple_tooltip("area","tooltip-parking");

а

simple_tooltip("area");

И, когда выставляете код, то жалейте читающих его (сами себя, это уже ваши проблемы) - делайте отступы в нем, а то в каше вами представленной разбираться....


Часовой пояс GMT +3, время: 14:47.