Как правильно различить объекты

@Probka · Регистрация: 13.01.2013

Здравствуйте уважаемые форумчане возникла у меня такая проблема - есть два элемента :

HTML5

1 2	<a class='class1' href="#">SomeText</a> <a class='class1' href="#"><em>SomeText</em></a>

Мне нужно сделать следующие - вызвать событие при наведении на первую ссылку, без тега em, но чтобы это событие не работало при наведении на вторую - с тегом em. Как вызвать событие я знаю, а вот с разделением беда...

Если быть точнее, то подскажите пожалуйста каким образом в скрипте можно разграничить эти две ссылки, с учетом того что класс у них одинаков, т.е. по присутствию этого самого тега em?

@Dolphin · 29.01.2013, 06:53

Javascript

1
2
3

$('.class1').first().mouseover(function(){
    alert($(this).text());
});

@Soldado · 29.01.2013, 11:58

Если решать задачу буквально, т.е. исключить элементы с классом .class1 содержащие в себе теги em, то:

Javascript

1
2
3

$('.class1').not($('.class1 em').parent()).mouseover(function(){
    alert($(this).text());
});

@Probka · 29.01.2013, 13:42 **[ТС]**

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

Javascript

$(document).ready(function() { 
 
 $('.tip').each(function(){
  var myTip = $(this),
      clickTip = myTip.children('a'),
      tip = myTip.find('span.answer , span.answer-left'),
      tipW = tip.width(),
      tipH = tip.height(),
      winW = $(window).width(),
      winH = $(window).height();
 
  tip.hide().append('<b>X</b>'),
      closeTip = tip.children('b');
 
  function showTip(e){
  e.preventDefault();
  var xM = e.pageX, 
      yM = e.pageY,
      scrollwinH = $(window).scrollTop(),
      scrollwinW = $(window).scrollLeft(),
      curwinH = $(window).scrollTop() + $(window).height();
  if ( xM > scrollwinW + tipW * 2 ) {tip.removeClass('answer').addClass('answer-left');}
     else {tip.removeClass('answer-left').addClass('answer');}
  if ( yM > scrollwinH + tipH && yM > curwinH / 2 ) {tip.addClass('a-top');} 
     else {tip.removeClass('a-top');}
 
  tip.fadeIn(100).css('display','block');}
 
  function hideTip(n){                  
    tip.fadeOut(300);
    n.stopPropagation();}
 
  clickTip.click(showTip);
  closeTip.click(hideTip);
 });
});

к нему прилагается вот такой HTML

HTML5

1	<span class="tip"><a tabindex="1"><em>?</em></a><span class='answer'>Тут текст подсказки</span></span>

Там еще длинный CSS но думаю он не столь важен. Код такой потому что идея в том что подсказка будет корректно работать даже с отключенным JS.

Ну так вот, хочется сделать так чтобы когда тег em присутствует, (ему через стили задается вид кнопочку как вы уже догадались), то подсказка появляется по клику, как сейчас и происходит. Но когда его нет, т.е. это просто текст-ссылка, подсказка появляется при наведении. Вот такая мысль, а у меня ступор в плане реализации...

@Mullih · 29.01.2013, 13:55

как и писали выше

Javascript

jQuery(function ($) {
    $('.tip').not($('.tip em').closest('.tip')).mouseover(function () {
        alert($(this).text());
    });
 
    $('.tip em').closest('.tip').click(function (e) {
        e.preventDefault();
    });
});

если не так то кусок html дайте где присутсвуют оба варианта и обвертка их родителя, а то сложно по словам и отрывку селекторы сочинять)

@Dolphin · 29.01.2013, 13:58

По моему проще будет добавить еще один класс к ссылке, к которой добавлять событие

@Mullih · 29.01.2013, 14:01

Сообщение от Dolphin

По моему проще будет добавить еще один класс к ссылке, к которой добавлять событие

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

@Soldado · 29.01.2013, 14:06

Javascript

1 2	tip = myTip.find('span.answer , span.answer-left'), tipW = tip.width(),

Вы в переменную заносите несколько объектов, а затем в другую переменную заносите ширину как-будто у них ширина одна на всех, ну и дальше в том же духе.

@Mullih · 29.01.2013, 14:21

дайте плиз html

@Probka · 29.01.2013, 16:59 **[ТС]**

прошу простить что сразу дал не то что надо, просто подумал дело в этом, моя вина, простите что ввел в заблуждение.
Второй пример и есть именно ОН, т.е. код такой у меня и есть, вот скидываю все как это есть в моем исходном файле, вместе с JS, CSS, HTML. Естественно , что подсказок может быть не всего две, а больше.

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script>
$(document).ready(function() { 
 
 $('.tip').each(function(){
  var myTip = $(this),
      clickTip = myTip.children('a'),
      tip = myTip.find('span.answer , span.answer-left'),
      tipW = tip.width(),
      tipH = tip.height(),
      winW = $(window).width(),
      winH = $(window).height();
 
  tip.hide().append('<b>X</b>'),
      closeTip = tip.children('b');
 
  function showTip(e){
  e.preventDefault();
  var xM = e.pageX, 
      yM = e.pageY,
      scrollwinH = $(window).scrollTop(),
      scrollwinW = $(window).scrollLeft(),
      curwinH = $(window).scrollTop() + $(window).height();
  if ( xM > scrollwinW + tipW * 2 ) {tip.removeClass('answer').addClass('answer-left');}
     else {tip.removeClass('answer-left').addClass('answer');}
  if ( yM > scrollwinH + tipH && yM > curwinH / 2 ) {tip.addClass('a-top');} 
     else {tip.removeClass('a-top');}
 
  tip.fadeIn(100).css('display','block');}
 
  function hideTip(n){                  
    tip.fadeOut(300);
    n.stopPropagation();}
 
  clickTip.click(showTip);
  closeTip.click(hideTip);
 });
});
</script>
<style>
.tip {
 display:inline-block;
 position:relative;
}
.tip em {
 position:relative;
 background:#FD6E00;
 text-align:center;
 border-radius: 20px;
 border: 1px solid #ccc;
 color: #fff;
 font: normal bold 12px Arial;
 text-decoration: none;
 cursor:pointer;
 padding: 0 4px;
}
.answer>b,
.answer-left>b {
 position:absolute;
 font: normal bold 14px Comic Sans MS;
 color:#999;
 cursor:pointer;
 padding: 4px;
}
.answer>b,
.answerimg>b {
 top:0;
 right:0;
}
.answer-left>b {
 top:0;
 left:0;
}
.answer>b:hover,
.answer-left>b:hover {color:#000;}
 
.answer, 
.answer-left { 
 display:none;
 position:absolute;
 z-index:9998;
 background: #EDEDED;
 border-radius: 3px;
 border: 1px solid #ccc;
 color: #000;
 font: normal 500 14px Trebuchet MS;
 text-align:left;
 text-shadow: 0 1px 2px #fff, 0 0 10px #E0F1FF;
 text-decoration: none;
 opacity:.9; 
 cursor:default;
 margin-top:-30px;
 width: 200px;
 min-height: 50px;
 max-height: auto;
 white-space: normal;
}
.answer {
 box-shadow: 5px 5px 0.5em -0.1em rgba(0,0,6,0.5);
 right: -240px;
 padding: 5px 20px 7px 7px;
}
.answer-left {
 box-shadow: -5px 5px 0.5em -0.1em rgba(0,0,6,0.5);
 left: -240px;
 padding: 5px 7px 7px 20px;
}
.a-top {
 bottom: -10px;
}
 
.a-top:before,
.answer:before, 
.answer-left:before {
 content:"";
 position:absolute;
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAArElEQVQ4T5WSMQ7DIAxFnazt1qFbb9D7j+yAxEk4g2Mj/8hFkAZLXyLmv6+AIWYeKufMEM3qCqy1Xgd4KKW0eRBCT/aNsjLoFWMcgn2A+NS/N1gWb2n+/OpM8BhHCt0CIR+wBEJnwCoInfBqAJjpeGaCVzkqpehtf+8EwCNSbmtzDiHs0nhg8x+o/nbb3Qv7jALQa7P15WGVmJ4+AGuREa56WKXncRDLt7l9ER2tcpC0SynvkgAAAABJRU5ErkJggg==) no-repeat;
 width: 9px;
 height: 15px;
}
.answer:before {
 left: -9px;
 margin-top: 10px;
 background-position: 0 0;
}
.answer-left:before {
 right: -9px;
 margin-top: 10px;
 background-position: -9px 0;
}
.a-top:before {
 bottom: 10px;
}
.tip>a:focus~span.answer,
.tip>a:focus~span.answer-left {
 display:block;
}
.tip>a[tabindex="1"]:focus {
 outline: none;
}
.tip>a[tabindex="1"]:focus>em {
 background:#FF4F19;
}
</style>
</head>
<body>
<div>
<br>
Тут контент
<br>
<br>
<div>
Тут контент
<span class="tip"><a tabindex="1"><em>?</em></a><span class='answer'>Тут текст подсказки по клику</span></span>
<br>
</div>
<br>
<span class="tip"><a href="#" tabindex="1">SomeLink</a><span class='answer'>Тут текст всплывающей подсказки</span></span>
<br>
Тут контент<span class="tip"><a tabindex="1"><em>?</em></a><span class='answer'>Тут текст подсказки по клику</span></span>
<br>
Тут контент<span class="tip"><a href="#" tabindex="1">SomeLink</a><span class='answer'>Тут текст всплывающей подсказки</span></span>
</div>
</body>
</html>

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

@Mullih · 29.01.2013, 17:17

строка 38 замените на блок

Javascript

if (myTip.is(':has(a > em)')) {
    clickTip.click(showTip);
} else {
    myTip.children().first().mouseover(showTip);
}

@Probka · 29.01.2013, 17:55 **[ТС]**

Вот! Именно эту конструкцию я не мог сообразить,

Спасибо Mullih и всем кто принимал участие и помогал

Может у кого возникнут решения по оптимизации данного детища, я буду только рад и примного благодарен. Еще раз всем, большое спасибо.

@Mullih · 29.01.2013, 18:10

возникнут решения по оптимизации данного детища

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

а не городить ветки условий

но это мое ИМХО

@Soldado · 29.01.2013, 18:36

Могу предложить ещё такой вариант: демо-страница.
Предположим. что есть много таких пар элементов с одинаковым классом:

Javascript

1 2	<a class='class1' href="#" >SomeText1</a> <span class='class1'><em data-title="1.Подсказка">?</em></span>

Тогда mouseover только для ссылки может быть таким:

Javascript

1
2
3

$('.class1').not($('.class1 em').parent()).mouseover(function(){
...
});

В вышеприведённом коде исключаются элементы с таким же классом у которых внутри есть em, как Вы и просили

вызвать событие при наведении на первую ссылку, без тега em, но чтобы это событие не работало при наведении на вторую - с тегом em.

Клик по элементу em будет таким:

Javascript

1
2
3

$('.class1 em').click(function(){
     ....
});

По этим события и запускается функция вывода блока подсказки.
Обычно я местоположение блока подсказки получаю из координат (offset) кликнутого элемента плюс/минус какое-то смещение. Информацию для блока подсказки можно хранить, предположим, в атрибуте data-title кликнутого элемента. Сам блок подсказок изначально невидим и абсолютно позиционирован (в стилях). Скриптом мы задаём блоку подсказок новые координаты и показываем его.

Javascript

function podskazka(){
$('#podskazka').css('display','none');// скрываем предыдущую подсказку   
var coopd=myobject.offset();// получаем координаты кликнутого объекта
var topB=coopd.top;
var leftB=coopd.left;
topB=topB-20;// задаём смещение
leftB=leftB+16;
var textP=myobject.attr('data-title');// в переменную заносим текст подсказки  
$('#podskazka').css({ // задаём новые координаты блоку подсказок
top:topB,
left:leftB,
});
$('#podskazka').fadeIn(300).text(textP);// показываем подсказку с соответствующим текстом
};

@Probka · 29.01.2013, 19:08 **[ТС]**

Mullih, теперь тоже так думаю, вообще изначально идея у меня была простая - клик подсказка только на CSS, вот ее изначальный вариант - http://www.magentawave.com/201... n-css.html, но потом решил я немного автоматизировать и улучшить процесс, но только без плагинов - маленький JS (чисто функционал - позиционирование, закрытие и вот собственно бонус, возможность появления без клика), вот "докатился" до такого скрипта... Но как я уже говорил, я - начинающий, поэтому возможно и "горожу" пока как могу.

Добавлено через 15 минут
Soldado, да это хороший вариант, но что будет если у пользователя отключен JS ? Просто у меня идея была в универсальности, чтобы работало "и так, и так" , но ваш вариант хорош, тем более что атрибутом data-title можно управлять через CSS.
Я тоже сперва пробовал через offset, но потом отказался, он плохо проявил себя когда страница длинная и у исходного документа много родительских блоков :

HTML5

<div class='someClass'>
 <div class='someClass'>
  <div class='someClass'>
тут еще чего-нибудь
  </div>
   <div class='someClass'>
Тут контент и подсказки
   </div> 
 </div>
</div>

хотя возможно я что-то не правильно делал...

Добавлено через 14 минут
Mullih - хороший ресурс, буду читать, ума-разума набираться. А то бывает ищешь, находишь, начинаешь читать, а там вроде и разжевано, а ни чего не понятно.

Еще раз всем огромное спасибо за помощь, и что не оставили без внимания

. Буду учится дальше.

@Soldado · 29.01.2013, 19:13

Ну если у одного из тысячи и может быть отключен js - то этот пользователь останется без подсказок. Думаю, что задумываться о таком вообще не стоит. А вдруг кто-то картинки отключит и flash плеер не установит?

Если использовать css3 то можно такое сделать

@Probka · 29.01.2013, 19:32 **[ТС]**

Сообщение от Soldado

А вдруг кто-то картинки отключит и flash плеер не установит?

тогда это провал!

. Ну а если серьезно, то вы конечно правы, таких, которые без JS, нынче очень мало.
Про такой трюк на CSS3 я знаю, только не думал что он и через обычный title работает, использовал как-то именно data-title для такой штуки, на картинках особенно хорошо смотрится это дело.

@Dolphin 812 / 795 / 201 Регистрация: 21.09.2012 Сообщений: 2,653
	29.01.2013, 13:58	6
	По моему проще будет добавить еще один класс к ссылке, к которой добавлять событие 0

@Mullih 92 / 71 / 8 Регистрация: 05.08.2012 Сообщений: 138
	29.01.2013, 14:01	7
	Сообщение от Dolphin По моему проще будет добавить еще один класс к ссылке, к которой добавлять событие смысла гадать нету тк пример приведенный сразу отличается от дальнейшего как минимум вложениями, чувствуется следующии пример будет тоже отличатся от 2-х предыдущих 0

@Mullih 92 / 71 / 8 Регистрация: 05.08.2012 Сообщений: 138
	29.01.2013, 14:21	9
	дайте плиз html 0

@Probka 2 / 2 / 0 Регистрация: 13.01.2013 Сообщений: 10
	29.01.2013, 17:55 [ТС]	12
	Вот! Именно эту конструкцию я не мог сообразить, Спасибо Mullih и всем кто принимал участие и помогал Может у кого возникнут решения по оптимизации данного детища, я буду только рад и примного благодарен. Еще раз всем, большое спасибо. 0

@Mullih 92 / 71 / 8 Регистрация: 05.08.2012 Сообщений: 138
	29.01.2013, 18:10	13
	возникнут решения по оптимизации данного детища красивее будет просто подписаться по отдельности для ховера и клика и если к кому событие и прийдет сгененрировать подсказка, и пробиндить закрытие а не городить ветки условий но это мое ИМХО 0

@Soldado 899 / 832 / 197 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	29.01.2013, 19:13	16
	Ну если у одного из тысячи и может быть отключен js - то этот пользователь останется без подсказок. Думаю, что задумываться о таком вообще не стоит. А вдруг кто-то картинки отключит и flash плеер не установит? Если использовать css3 то можно такое сделать 0

@Probka 2 / 2 / 0 Регистрация: 13.01.2013 Сообщений: 10
	29.01.2013, 19:32 [ТС]	17
	Сообщение от Soldado А вдруг кто-то картинки отключит и flash плеер не установит? тогда это провал! . Ну а если серьезно, то вы конечно правы, таких, которые без JS, нынче очень мало. Про такой трюк на CSS3 я знаю, только не думал что он и через обычный title работает, использовал как-то именно data-title для такой штуки, на картинках особенно хорошо смотрится это дело. 0