Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/69.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
jQuery;对从动态创建的变量值创建的类应用样式_Jquery_Css_Mouseover - Fatal编程技术网

jQuery;对从动态创建的变量值创建的类应用样式

jQuery;对从动态创建的变量值创建的类应用样式,jquery,css,mouseover,Jquery,Css,Mouseover,在动态生成一些变量之后,我想使用它们的值来查找类,并对每个类应用一些样式。这就是我迄今为止所尝试的: $(document).ready(function() { var input = [] var message = [] for(var n=1; n<=3; n++) { input[n] = 'text' + n; //this will create three variables with the values text

在动态生成一些变量之后,我想使用它们的值来查找类,并对每个类应用一些样式。这就是我迄今为止所尝试的:

$(document).ready(function() { 
    var input = []
    var message = []        
    for(var n=1; n<=3; n++) {
        input[n] = 'text' + n; //this will create three variables with the values text1, text2 and text3
        message[n] = 'tip' + n; //this will create three variables with the values tip1, tip2 and tip3
        $('.' + input[n]).mouseover(function() {
            $('.' + message[n]).css("display", "block"); 
        });
        $('.' + input[n]).mouseout(function() {
            $('.' + message[n]).css("display", "none"); 
        });
    }
});
$(文档).ready(函数(){
变量输入=[]
var消息=[]

对于(var n=1;n您可以使用带有文档mouseover/mouseout事件的选择器来执行此操作。只需使用“input”和“message”作为类,并使用data属性将输入连接到消息

PHP:

<?php 
    for($i=1; $i<10; $i++)
    {
        echo '<span class="input" data-anchor="'.$i.'">This is input '.$i.'</span>';
        echo '<span class="message" data-anchor="'.$i.'" style="display:none">This is message '.$i.'</span><br>';
    }
?>
$(document).on('mouseover', '.input', function(){
    var anchor = $(this).data('anchor');
    $('.message[data-anchor="'+anchor+'"]').show();
});

$(document).on('mouseout', '.input', function(){
    var anchor = $(this).data('anchor');
    $('.message[data-anchor="'+anchor+'"]').hide();
});