jQuery;对根据动态创建的变量的值创建的 类 应用样式
jQuery; apply styling on classes created from the values of dynamically created variables
动态生成一些变量后,我想使用它们的值来查找 classes 并对它们中的每一个应用一些样式。这是我到目前为止尝试过的:
$(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");
});
}
});
所以我想要的逻辑是:
- 悬停在 class text1 上时,tip1 应该显示(否则 tip1 将被隐藏)
- 悬停在 class 文本 2 上时,提示 2 应该显示(否则提示 2 将被隐藏)
- 悬停在 class 文本 3 上时,提示 3 应该显示(否则提示 3 将被隐藏)
仅当我在 n
上提供了 -harcoded- 值时,计划的逻辑才有效,但 n
的值可能会在未来更改为更高的值(例如 4、5 或更多),所以我想知道是否有一种通用的方法来应用该逻辑。
有人可以帮我一下吗?
您可以使用带有文档 mouseover/mouseout 事件的选择器来执行此操作。只需使用 "input" 和 "message" 作为您的 类 并使用数据属性将输入连接到消息。
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>';
}
?>
JQUERY:
$(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();
});
动态生成一些变量后,我想使用它们的值来查找 classes 并对它们中的每一个应用一些样式。这是我到目前为止尝试过的:
$(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");
});
}
});
所以我想要的逻辑是:
- 悬停在 class text1 上时,tip1 应该显示(否则 tip1 将被隐藏)
- 悬停在 class 文本 2 上时,提示 2 应该显示(否则提示 2 将被隐藏)
- 悬停在 class 文本 3 上时,提示 3 应该显示(否则提示 3 将被隐藏)
仅当我在 n
上提供了 -harcoded- 值时,计划的逻辑才有效,但 n
的值可能会在未来更改为更高的值(例如 4、5 或更多),所以我想知道是否有一种通用的方法来应用该逻辑。
有人可以帮我一下吗?
您可以使用带有文档 mouseover/mouseout 事件的选择器来执行此操作。只需使用 "input" 和 "message" 作为您的 类 并使用数据属性将输入连接到消息。
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>';
}
?>
JQUERY:
$(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();
});