如何使用jquery点击功能使用'alt'文本创建图片字幕 [英] How to create image captions with 'alt' text using jquery click function

问题描述

我正在创建一个图片库，将每个图片的替代文字显示为字幕。现在我有一些东西，使用mouseenter / mouseleave函数为这个期望的结果。

JS

  $（function（）{
 $（。thumb）。mouseenter（function（）{
 var $ t = $（this）; 
 var $ d = $（< div>）; 
 d.addClass（desc）。text（$ t.attr（alt））css（{
 width：$ t.width（），
 height：$ t.height -  20，
 top：$ t.position（）。top 
}）; 
 $ t.after（$ d）.fadeTo（fast，0.3）; 
 $ d.mouseleave（function（）{
 $（this）.fadeOut（fast，0，function（）{
 $（this）.remove（）; 
}）。 siblings（img.thumb）。fadeTo（fast，1.0）; 
}）; 
}）; 
}）; 
   
 
 
 
 HTML 
 < div> 
< img class =thumbsrc =myImage1alt =caption> 
< / div> 
< div> 
< img class =thumbsrc =myImage2alt =caption> 
< / div> 
  
这里有一个例子，说明了字幕在视觉上的外观。 
  http://jsfiddle.net/CTQvN/168/  
 
 
 
基本上，我想要能够同时显示多个图片的字幕，只需点击页面上看起来像按钮的链接，而不是mouseenter的功能，以便我可以容纳智能手机一个没有鼠标的其他设备。我想保持这个当前脚本的视觉美学，​​同时更新我迄今为止的功能部分。我非常新的JavaScript，我意识到，我的代码是不是最好的现在所以请在这一个承担与我。我非常愿意提出建议，我非常愿意学习如何让这个工作。 
解决方案
以下是一种可能性：
 
 
 
 示例 
  $ （'.thumb'）。click（function（）{
 $（this）.trigger（'mouseenter'）; 
}）; 
  
或者如果您想要一个按钮：
 
 
 
 范例 
  $（'button'）。click（function（）{
 $（'。thumb'）。trigger（'mouseenter'）; 
}）; 
  
 
I'm creating an image gallery that shows the alt text as captions for each individual image. Right now I have something that uses the mouseenter/mouseleave function for this desired result. 

JS
$(function () {
    $(".thumb").mouseenter(function () {
        var $t = $(this);
        var $d = $("<div>");
        $d.addClass("desc").text($t.attr("alt")).css({
            width: $t.width(),
            height: $t.height() - 20,
            top: $t.position().top
        });
        $t.after($d).fadeTo("fast", 0.3);
        $d.mouseleave(function () {
            $(this).fadeOut("fast", 0, function () {
                $(this).remove();
            }).siblings("img.thumb").fadeTo("fast", 1.0);
        });
    });
});
HTML
<div>
    <img class="thumb" src="myImage1" alt="caption">
</div>
<div>
    <img class="thumb" src="myImage2" alt="caption">
</div>
Here's an example of what I had in mind in terms of how the captions will look visually.
http://jsfiddle.net/CTQvN/168/

Basically I want to be able to show the captions of multiple images simultaneously by clicking on a link somewhere on the page that looks like a button, instead of the mouseenter functions so that I can accommodate to smartphones an other devices without a mouse. I'd like to maintain the visual aesthetics of this current script while updating the function portion of what I have so far. I'm very new to JavaScript and I realize that my code is not the best right now so please bear with me on this one. I'm very open to suggestions, and I'm extremely willing to learn how to get this to work. Cheers!
解决方案
Here's one possibility:

EXAMPLE
$('.thumb').click(function() {
    $(this).trigger('mouseenter'); 
});
Or if you'd like a button:

EXAMPLE
$('button').click(function() {
    $('.thumb').trigger('mouseenter'); 
});


                        
这篇关于如何使用jquery点击功能使用'alt'文本创建图片字幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！