jquery selector for finding string

Question

$(function(){
    var one = 'twitter';
    var two = 'about';
    var three = 'contact';
    var four = 'exp';
    var five = 'price';

    $('#twitter').hover(function(){
        $(this).append('<p class="hvtext" id="twitterz">'+ one + '</p>');
        $('.hvtext').css({left:'1.7em',
                          bottom: '0.1em'});

    }, function(){
        $('.hvtext').hide();
    });
    $('#about').hover(function(){
        $(this).append('<p class="hvtext">' + two + '</p>');
        $('.hvtext').css({left:'1.7em', bottom:'0.1em'});
    }, function(){
        $('.hvtext').hide();
    });
    $('#contact').hover(function(){
        $(this).append('<p class="hvtext">'+ three + '</p>')
        $('.hvtext').css({left:'1.2em', bottom:'0.1em'});
    }, function(){
        $('.hvtext').hide();
    });
    $('#experience').hover(function(){
        $(this).append('<p class="hvtext">'+ four + '</p>');
        $('.hvtext').css({left:'2.3em', bottom:'0.1em'});
    }, function(){
        $('.hvtext').hide();
    });
    $('#prices').hover(function(){
        $(this).append('<p class="hvtext">'+ five + '</p>');
        $('.hvtext').css({left:'2em',bottom:'0.1em'});
    }, function(){
        $('.hvtext').hide();
    });

    one.click(function(){
        alert('element exists');
    });



});

I'm trying to find a way of calling the .hvtext class as a selector which will be later used as an on click event.

Problem is, the class is added dynamically by .append, i tried using .is(':visible') and couldn't find it?

Another problem: since it's a class I also want to identify them individually, should i just use Id's?

To solve this I tried to distinguish them by adding a var for each of the texts hoping I could call them later as an event, but since they're just variable strings and not an element I can't.

Is there anyway I can achieve this?

I don't understand this part: "I'm trying to find a way of calling the .hvtext" Where in your code are you stuck? I see many $('.hvtext') so please clarify your question. BTW, if it's only for styling, then use CSS rules — A. Wolff
– A. Wolff, Commented Dec 13, 2013 at 12:00
In your specific example, you are setting "one" as a string, which has no click binding. If your actual code reflects this same error, then you should actually use $('#' + one).on('click', function() {/* code */}); — Jim Yarbro
– Jim Yarbro, Commented Dec 13, 2013 at 12:02
Is there any reason you can't write the .hvtext element in your markup and only select/change it in js? — Seimen
– Seimen, Commented Dec 13, 2013 at 12:02

Liam · Accepted Answer · 2013-12-13 12:09:52Z

1

Problem is, the class is added dynamically by .append

If it's added dynamically you need to use .on:

$('#prices').on('click', '.hvtext', function() {/*click stuff here*/});

since it's a class I also want to identify them individually, should i just use Id's?

why? this is where $(this) comes in. If you need to pass data I'd do something like:

$('#experience').hover(function(){
    var newHvText = $('<p class="hvtext">'+ four + '</p>');
    newHvText.data('leftEm', '2em');
    $(this).append(newHvText);
}, function(){
    $('.hvtext').hide();
}););

then

$('#prices').on('click', '.hvtext', function() {/*click stuff here*/
       var thisIsTheClickedElement =  $(this);
       var leftEm = thisIsTheClickedElement.data('leftEm');
       $('.hvtext').css({left:leftEm});
});

You seem to be trying to add a tooltip here, have you considered the http://jqueryui.com/tooltip/ instead?

edited Dec 13, 2013 at 12:09

answered Dec 13, 2013 at 12:04

Liam

30k28 gold badges143 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Liam Over a year ago

Added some more detail as it seems you need to adjust the left and bottom depending on which is hovered.

Collectives™ on Stack Overflow

jquery selector for finding string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related