Наследяване на jQuery Qtip

Използвах плъгина jQuery Qtip, за да създам някои подсказки, използвайки следния код:

$('*[title]').each(function() {
        //if ($(this).attr('title') != "") {
        $(this).qtip({
            content: $(this).attr('title'),
            position: {
                target: 'mouse',
                adjust: {
                    screen: true,
                    x: 5,
                    y: 15
                },
                corner: {
                    target: 'rightMiddle',
                    tooltip: 'leftMiddle'
                }
            },
            style: {
                fontSize: 11,
                padding: '2px 6px',
                textAlign: 'left',
                lineHeight: 1.5,
                fontWeight: 'bold',
                color: '#444',
                border: {
                    width: 1,
                    radius: 2
                },
                name: 'cream'
            }
        })
           .attr('title', '');
        // }
    });


    $('span.help').each(function () {
        $(this).qtip({
            /*content: {
            text: $(this).html()
            },*/
            content: $(this).attr('title'),
            position: {
                adjust: {
                    screen: false,
                    x: 0,
                    y: 0
                },
                corner: {
                    target: 'topRight',
                    tooltip: 'bottomRight'
                }
            },
            show: 'mouseover',
            hide: 'mouseout',
            style: {
                title: { 'font-size': 11, padding: '6px 6px', lineHeight: 1.5 },
                fontSize: 11,
                padding: '6px 6px',
                textAlign: 'left',
                lineHeight: 1.5,
                fontWeight: '600',
                border: {
                    width: 3,
                    radius: 3
                },
                tip: 'bottomRight',
                name: 'cream'
            }
        })
   .attr('title', '');
    });

По принцип всички елементи със заглавие имат подсказка, НО аз искам елементи с клас help да имат специална подсказка. Това, което се случва, е, че получавам ДВЕ подсказки за помощния елемент. Възможно ли е да замените напълно първото с второто?

Може би с помощта на някакъв оператор if, за да проверите първо, че това НЕ е помощният клас, ако не, тогава направете първата функция и ако е така, тогава направете втората функция.

Благодаря


person Cameron    schedule 28.07.2011    source източник
comment
Актуализирах отговора си, след като коригирах проблема с класа.   -  person Sparkup    schedule 28.07.2011


Отговори (3)


Опитахте ли просто да добавите :not() клауза към първия си избор, за да изключите помощните обхвати?:

 $('*[title]:not(span.help)').each(function() {
person kiddailey    schedule 29.07.2011

РЕДАКТИРАНЕ:

var title = $(this).attr('title'),
    help = $(this).attr('class'),
    isHelp = undefined;

if(help !== undefined){
    var isHelp = help.search('help');
}


if(title !== undefined){


    if((title.length !== 0)&&((isHelp == -1)||(isHelp == undefined))){

        alert('do title tiptool function');

    }

}

Пример: http://jsfiddle.net/ZqLH6/6/

person Sparkup    schedule 28.07.2011

Можете да имате селектор като $("[title], .help"), който избира всички елементи, които искате да дадете подсказка. След това във всяка анонимна функция използвайте $(this).hasClass("help"), за да определите коя подсказка искате да дадете на този елемент.

person Dennis    schedule 28.07.2011