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');
    });



});

我正在尝试找到一种将.hvtext类作为选择器调用的方法，该方法稍后将用作on click事件。

问题，该类是由.append动态添加的，我尝试使用.is(':visible')但无法找到它？

另一个问题：因为它是一个类我也想单独识别它们，我应该使用Id吗？

要解决此问题，我尝试通过为每个文本添加var来区分它们，希望我稍后可以将它们称为事件，但因为它们只是变量字符串而且不是我不能的元素。

无论如何我能做到这一点吗？

Answer 1

问题是，该类是由.append
动态添加的

如果动态添加，则需要使用.on：

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

因为它是一个班级我也想单独识别它们，我应该只是使用Id的？

为什么呢？这就是$(this)的用武之地。如果你需要传递数据，我会做类似的事情：

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

然后

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

您似乎在尝试在此处添加工具提示，您是否考虑过http://jqueryui.com/tooltip/？

用于查找字符串的jquery选择器

1 个答案: