Question

我正在尝试编写一个代码，当它悬停在封装在

内的标题上时会显示一个链接图标

我做的是，我有一个CSS课程samplea。有许多<a>与class='samplea'。然后我插入jQuery以在<a>之后添加自定义链接图像。我最初隐藏了这张照片。然后添加了jQuery，以便在悬停在标题上时显示/隐藏它。

但是我可以在所有<a class='samplea'>之后插入图片，但无法隐藏/显示它们。

HTML

<h3><a class="samplea"  id="aid">Sample Title</a></h3>
<h3><a class="samplea"  id="a1">Sample Title</a></h3>
<h3><a class="samplea"  id="a1">Sample Title</a></h3>

CSS

.samplea {  
    }

JS

 $(document).ready(function () {
        var permalinkid = 1;
        $(".samplea").each(function (index) {
            $(this).after("&nbsp;&nbsp;<img src='http://www.spotzerblog.com/wp-content/themes/StandardTheme_261/images/icn_permalink.png' id='permalink" + permalinkid + "' />");
            //if you comment below line it will show the link icons 
            //appropriately
            $("#permalink" + permalinkid).hide();                
            $(this).hover(
                   function () { $("#permalink" + permalinkid).show(); },
                   function () { $("#permalink" + permalinkid).hide(); }
            );
            permalinkid = permalinkid + 1;               
        });
    });

为什么会这样？这是相应的JSFiddle。

Answer 1

试试这个：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('mouseenter mouseleave', 'h3', function () {
    $(this).find('img').toggle();
});

FIDDLE DEMO

Answer 2

您在每次迭代中递增permalinkid = permalinkid + 1，但只有当您进入＆＃34; hover＆＃34;时才会对其进行评估。这将使它成为permalink4 http://jsfiddle.net/balintbako/G3Psm/5/ Palash Mondal的答案主要是解决你的问题，但是如果你想保持它的ID，那么检查一下： http://jsfiddle.net/balintbako/G3Psm/9/

$(document).ready(function () {
    var permalinkid = 1;
    $(".samplea").each(function (index) {
        var temp = permalinkid;
        $(this).after($("<div id='permalink" + temp + "'>text</div>"));
        //if you comment below line it will show link icon
        //appropriately        
        $("#permalink" + permalinkid).hide();
        $(this).hover(

        function () {
            $("#permalink" + temp).show();
        },

        function () {
            $("#permalink" + temp).hide();
        });
        permalinkid = permalinkid + 1;
    });
});

jQuery为什么动态添加的图像不会在悬停时显示/隐藏

2 个答案: