Javascript / Jquery: если rel найден, добавить данные, в противном случае не добавлять данные

Question

Javascript / Jquery: если rel найден, добавить данные, в противном случае не добавлять данные

0

У меня есть предыдущий jsfiddle. Прямо сейчас, если вы наведете "тестирование", вы увидите квадратный блок. Вы заметите в html, <a> для тестирования не имеет rel. Что я добавляю, чтобы предотвратить добавление в текст, если нет rel, но все еще добавляется, если найден rel?

Код:

this.screenshotPreview = function(){            
        xOffset = 20;
        yOffset = 30;

    $("tr").hover(function(e){
         var text = $(this).find('a').attr('rel');   
        $("body").append("<p id='screenshot'>"+ text +"</p>");                                 
        $("#screenshot")
            .css("top",(e.pageY - yOffset) + "px")
            .css("left",(e.pageX + xOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#screenshot").remove();
    });    
    $("a.screenshot").mousemove(function(e){
        $("#screenshot")
            .css("top",(e.pageY - yOffset) + "px")
            .css("left",(e.pageX + xOffset) + "px");
    });            
};

// starting the script on page load
$(document).ready(function(){
    screenshotPreview();
});

HTML:

<table>
    <tr><td>content<a rel="Testing this out.  This could be a long description. Blah blah blah. Testing this out.  Testing this out.  This could be a long description. Blah blah blah. Testing this out.  " ></td></tr>
        <tr><td><a>Testing</a></td></tr>
    <table>

kdjernigan 19 янв. 2014, в 21:15

Источник

Теги:

javascript

jquery

2 ответа

0

Попробуйте это для tr-hover:

$("tr").hover(function(e){
    var text = $(this).find('a').attr('rel');
    if ($.trim(text) === '') return;//exit if no text for append   
    $("body").append("<p id='screenshot'>"+ text +"</p>");                                 
    $("#screenshot")
        .css("top",(e.pageY - yOffset) + "px")
        .css("left",(e.pageX + xOffset) + "px")
        .fadeIn("fast");                        
},
function(){
    if (!this.t) return;
    this.title = this.t;    
    $("#screenshot").remove();
});

Pinal 19 янв. 2014, в 18:15

0

что делает это лучше / хуже, чем то, что сделал аденео, или это просто еще один метод достижения той же конечной цели?
kdjernigan 19 янв. 2014, в 20:07
0

Мой код не использует сложный селектор jQuery tr:has(a[rel]) , tr работает быстрее, чем tr:has(a[rel]) (это приведет к Sizzle)
Pinal 19 янв. 2014, в 20:28
1

@Pinal - Но селектор анализируется только один раз и отфильтровывает элементы перед присоединением обработчика событий, при этом проверка атрибута на каждом указателе мыши происходит каждый раз.
adeneo 19 янв. 2014, в 20:39

Показать ещё 1 комментарий

Ещё вопросы

что делает это лучше / хуже, чем то, что сделал аденео, или это просто еще один метод достижения той же конечной цели?
Мой код не использует сложный селектор jQuery tr:has(a[rel]) , tr работает быстрее, чем tr:has(a[rel]) (это приведет к Sizzle)
@Pinal - Но селектор анализируется только один раз и отфильтровывает элементы перед присоединением обработчика событий, при этом проверка атрибута на каждом указателе мыши происходит каждый раз.

adeneo · Accepted Answer · 2014-01-19T17-33-00.000Z

Измените селектор только на целевые элементы с rel

$("tr:has(a[rel])").hover(function(e){ ...

FIDDLE

идеальный! Спасибо! Я приму ваш ответ через 10 минут