Javascript-如何将其转换为简单的函数

我对Javascript非常陌生，但我正在努力学习。我知道这是jQuery，但我想知道是否有更快的方法来编写代码，比如创建一个更小的函数，我可以调用它来显示/隐藏文本

因为我将添加更多的缩略图，我不想为我在照片上显示的每一张照片和文本都写出来。

使用JQuery

$(document).ready(function()
    {
        // $('.pull-me').click(function()
        // {
        //     $('.login').slideToggle('slow')
        // });

        $('#thumbnail1').mouseenter(function()
        {
            $('#thumbnailTitle1').css('visibility', 'visible')
        });
        $('#thumbnail1').mouseleave(function()
        {
            $('#thumbnailTitle1').css('visibility', 'hidden')
        })


        $('#thumbnail2').mouseenter(function()
        {
            $('#thumbnailTitle2').css('visibility', 'visible')
        });
        $('#thumbnail2').mouseleave(function()
        {
            $('#thumbnailTitle2').css('visibility', 'hidden')
        })


        $('#thumbnail3').mouseenter(function()
        {
            $('#thumbnailTitle3').css('visibility', 'visible')
        });
        $('#thumbnail3').mouseleave(function()
        {
            $('#thumbnailTitle3').css('visibility', 'hidden')
        })
    });

使用css

 $('#thumbnail3').mouseleave(function(e)
        {
           $(e.target).hide();
        })

使用JQuery

$(document).ready(function()
    {
        // $('.pull-me').click(function()
        // {
        //     $('.login').slideToggle('slow')
        // });

        $('#thumbnail1').mouseenter(function()
        {
            $('#thumbnailTitle1').css('visibility', 'visible')
        });
        $('#thumbnail1').mouseleave(function()
        {
            $('#thumbnailTitle1').css('visibility', 'hidden')
        })


        $('#thumbnail2').mouseenter(function()
        {
            $('#thumbnailTitle2').css('visibility', 'visible')
        });
        $('#thumbnail2').mouseleave(function()
        {
            $('#thumbnailTitle2').css('visibility', 'hidden')
        })


        $('#thumbnail3').mouseenter(function()
        {
            $('#thumbnailTitle3').css('visibility', 'visible')
        });
        $('#thumbnail3').mouseleave(function()
        {
            $('#thumbnailTitle3').css('visibility', 'hidden')
        })
    });

使用css

 $('#thumbnail3').mouseleave(function(e)
        {
           $(e.target).hide();
        })

---

您可以使用绑定单个事件处理程序，在事件处理程序中，使用当前元素

this

id属性创建目标选择器

#thumbnail3:hover {display:none}

但是，我建议您使用自定义

data-*

前缀属性建立关系。这里举个例子

$（'.thumbnail'）。悬停（函数（）{
$（'#'+this.dataset.target）.toggleClass（'hidden'）；
}，函数（）{
$（'#'+this.dataset.target）.toggleClass（'hidden'）；
})

。隐藏{
可见性：隐藏；
}

缩略图1
缩略图2
缩略图3
图钉标题1
图钉标题2
thumbnailTitle3

您可以使用绑定单个事件处理程序，在事件处理程序中，使用当前元素

此

id属性创建目标选择器

#thumbnail3:hover {display:none}

但是，我建议您使用自定义

data-*

前缀属性建立关系。这里举个例子

$（'.thumbnail'）。悬停（函数（）{
$（'#'+this.dataset.target）.toggleClass（'hidden'）；
}，函数（）{
$（'#'+this.dataset.target）.toggleClass（'hidden'）；
})

。隐藏{
可见性：隐藏；
}

缩略图1
缩略图2
缩略图3
图钉标题1
图钉标题2
thumbnailTitle3

类似于以下内容：

$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){
    var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','visible');
}, function(){
    var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','hidden');
})

function handleEventsFor(index) {
  $('#thumbnail' + index).mouseenter(function() {
    $('#thumbnailTitle' + index).css('visibility', 'visible')
  });
  $('#thumbnail' + index).mouseleave(function() {
    $('#thumbnailTitle' + index).css('visibility', 'hidden')
  })
}

handleEventsFor(1);
handleEventsFor(2);

这样称呼它：

$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){
    var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','visible');
}, function(){
    var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','hidden');
})

function handleEventsFor(index) {
  $('#thumbnail' + index).mouseenter(function() {
    $('#thumbnailTitle' + index).css('visibility', 'visible')
  });
  $('#thumbnail' + index).mouseleave(function() {
    $('#thumbnailTitle' + index).css('visibility', 'hidden')
  })
}

handleEventsFor(1);
handleEventsFor(2);

或者像这样：

$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){
    var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','visible');
}, function(){
    var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','hidden');
})

function handleEventsFor(index) {
  $('#thumbnail' + index).mouseenter(function() {
    $('#thumbnailTitle' + index).css('visibility', 'visible')
  });
  $('#thumbnail' + index).mouseleave(function() {
    $('#thumbnailTitle' + index).css('visibility', 'hidden')
  })
}

handleEventsFor(1);
handleEventsFor(2);

for（变量i=0；i<5；++i）{
handleEventsFor（i）；
}

类似这样的内容：

$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){
    var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','visible');
}, function(){
    var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','hidden');
})

function handleEventsFor(index) {
  $('#thumbnail' + index).mouseenter(function() {
    $('#thumbnailTitle' + index).css('visibility', 'visible')
  });
  $('#thumbnail' + index).mouseleave(function() {
    $('#thumbnailTitle' + index).css('visibility', 'hidden')
  })
}

handleEventsFor(1);
handleEventsFor(2);

这样称呼它：

$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){
    var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','visible');
}, function(){
    var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','hidden');
})

function handleEventsFor(index) {
  $('#thumbnail' + index).mouseenter(function() {
    $('#thumbnailTitle' + index).css('visibility', 'visible')
  });
  $('#thumbnail' + index).mouseleave(function() {
    $('#thumbnailTitle' + index).css('visibility', 'hidden')
  })
}

handleEventsFor(1);
handleEventsFor(2);

或者像这样：

$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){
    var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','visible');
}, function(){
    var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','hidden');
})

function handleEventsFor(index) {
  $('#thumbnail' + index).mouseenter(function() {
    $('#thumbnailTitle' + index).css('visibility', 'visible')
  });
  $('#thumbnail' + index).mouseleave(function() {
    $('#thumbnailTitle' + index).css('visibility', 'hidden')
  })
}

handleEventsFor(1);
handleEventsFor(2);

for（变量i=0；i<5；++i）{
handleEventsFor（i）；
}

在循环中写入整个内容是一种选择

for(var i = 0; i < 5; ++i) {
  handleEventsFor(i);
}

---

for（var i=1；i在循环中写入整个内容是一种选择

for(var i = 0; i < 5; ++i) {
  handleEventsFor(i);
}

对于（var i=1；i以下是一个选项


（函数（$，窗口，未定义）{
var handle\u mouse\u events=函数handle\u mouse\u events（缩略图选择器、缩略图标题选择器）{
$（缩略图选择器）。鼠标指针(
函数（）{
$（缩略图标题选择器）.css（'visibility'，'visibility'）；
}
);
$（缩略图\u选择器）。鼠标移动(
函数（）{
$（缩略图标题选择器）.css（'visibility'，'hidden'）；
}
);
};
处理鼠标事件（“thumbnail1”、“thumbnailTitle1”）；
处理鼠标事件（“thumbnail2”、“thumbnailTitle2”）；
处理鼠标事件（“thumbnail3”、“thumbnailTitle3”）；
}）（jQuery，this）；
.image\u container>div{
显示：内联块；
宽度：150px；
高度：200px；
}
跨度{
可见性：隐藏；
}

标题#1
标题#2
标题#3
以下是一个选项


（函数（$，窗口，未定义）{
var handle\u mouse\u events=函数handle\u mouse\u events（缩略图选择器、缩略图标题选择器）{
$（缩略图选择器）。鼠标指针(
函数（）{
$（缩略图标题选择器）.css（'visibility'，'visibility'）；
}
);
$（缩略图\u选择器）。鼠标移动(
函数（）{
$（缩略图标题选择器）.css（'visibility'，'hidden'）；
}
);
};
处理鼠标事件（“thumbnail1”、“thumbnailTitle1”）；
处理鼠标事件（“thumbnail2”、“thumbnailTitle2”）；
处理鼠标事件（“thumbnail3”、“thumbnailTitle3”）；
}）（jQuery，this）；
.image\u container>div{
显示：内联块；
宽度：150px；
高度：200px；
}
跨度{
可见性：隐藏；
}

标题#1
标题#2
标题#3
我会为它编写一个简单的
visibleHover
插件。使用它会像这样工作

for(var i = 1; i <= whatever_your_length_is; i++) {
  $('#thumbnail' + i).mouseenter(function() {
    $('#thumbnailTitle' + i).css('visibility', 'visible');
  };

  $('#thumbnail' + i).mouseleave(function() {
     $('#thumbnailTitle' + i).css('visibility', 'hidden');
  });
}

或者如示例所示

$(selectorForThumbnails).visibleHover(selectorForText);

您可以自定义这些输入以匹配任何HTML结构

单击下面的“运行代码片段”按钮，查看它是否正常工作



（函数（$）{
$.fn.visibleHover=函数（选择器）{
返回此.each（函数（idx，elem）{
$（元素）。悬停(
function（）{$（选择器，elem）.css（'visibility'，'visible'）；}，
function（）{$（选择器，elem）.css（'visibility'，'hidden'）；}
);
});
};
})（jQuery）；
$（'.thumbnail'）。visibleHover（'span'）；
缩略图{
浮动：左；
右边距：10px；
}
.缩略图.图像{
宽度：100px；
高度：100px；
背景色：#eee；
}
.缩略图跨度{
可见性：隐藏；
}

文本A
文本B
文本C
我会为它编写一个简单的
visibleHover
插件。使用它会像这样工作

for(var i = 1; i <= whatever_your_length_is; i++) {
  $('#thumbnail' + i).mouseenter(function() {
    $('#thumbnailTitle' + i).css('visibility', 'visible');
  };

  $('#thumbnail' + i).mouseleave(function() {
     $('#thumbnailTitle' + i).css('visibility', 'hidden');
  });
}

或者如示例所示

$(selectorForThumbnails).visibleHover(selectorForText);

您可以自定义这些输入以匹配任何HTML结构

单击下面的“运行代码片段”按钮，查看它是否正常工作



（函数（$）{
$.fn.visibleHover=函数（选择器）{
返回此.each（函数（idx，elem）{
$（元素）。悬停(
function（）{$（选择器，elem）.css（'visibility'，'visible'）；}，
function（）{$（选择器，elem）.css（'visibility'，'hidden'）；}
);
});
};
})（jQuery）；
$（'.thumbnail'）。visibleHover（'span'）；
缩略图{
浮动：左；
右边距：10px；
}
.缩略图.图像{
宽度：100px；
高度：100px；
背景色：#eee；
}
.缩略图跨度{
可见性：隐藏；
}

文本A
文本B
文本C
您也可以这样尝试

比如说你的HTML

// '.thumbnail' is the class of the parent elements
// 'span' is the selector for the children text elements
$('.thumbnail').visibleHover('span');

你也可以这样试试

比如说你的HTML

// '.thumbnail' is the class of the parent elements
// 'span' is the selector for the children text elements
$('.thumbnail').visibleHover('span');

通过ID（即$（“#拇指钉”）引用是非常具体的。您可以