Javascript:在每个段落末尾显示可点击的图像

Question

$(document).ready(function(){
    function createPopup(event){
        $('<div class="popup"><img src="mysrc.jpg" img style="opacity=0.5; width:50px; height:50px;"></img></div>').appendTo('body');
        positionPopup(event); 
    };  
    function positionPopup(event){
        var tPosX = 950;
        var tPosY = event.clientY+25;
        $('div.popup').css({'position': 'absolute', 'top': tPosY, 'left':tPosX});
        $('#test').attr('ydown', parseInt(tPosY)+ parseInt(add));
    };
    var elements = document.getElementsByTagName('cposs');
    for(var i = 0; i < elements.length; i++){
        var imagetest = document.createElement("img");
        imagetest.src = "mysrc.jpg";
        elements[i].onmouseover = function(){
        this.style.background = 'Green';
        createPopup(event);
        }
        elements[i].onmouseout = function(){
        this.style.background = '';
        }
        var ycoor= $('#test').attr('ydown');
        $( "#test" ).append( "<a href=http://www.google.com><img src='mysrc.jpg'</img></a>" );
    }
});
</script>

    <div id="test" ydown="<?php echo $ydown; ?>" xdown="<?php echo $xdown; ?>">

然后有多个段落 <cposs></cposs>标签，这允许当鼠标悬停在文本上时突出显示文本，并在段落右侧创建一个弹出图像。我还为每个数了 <cposs></cposs>显示在测试 div 中的图像。

我希望能够完成几件事:

• 在页面加载时，我希望在每个 <cposs></cposs> 的末尾显示一个图像。文本。而不是固定坐标。
• 我希望这些图像在点击时执行一个功能。(尝试添加“onclick”属性，但说该功能未定义)
• 最终，我希望可点击的图像能够突出显示 cposs 标签之间的文本。与我现在的类似，但不是鼠标悬停，而是单击事件。

编辑:我尝试向附加图像添加 onclick 属性，但单击图像后，显示该函数未定义。我不确定如何获取 cposs 标签的坐标。我对是否能够在 javascript 中使用偏移和/或位置函数感到困惑。我尝试同时使用两者但没有成功。我想我真正需要知道的是如何获取 cposs 标签的结束坐标以及如何为每个显示的图像提供可点击的功能

我是 jsfiddle 的忠实粉丝!非常感谢任何形式的帮助!提前致谢。

Answer 1

这是一个 jsFiddle 示例:https://jsfiddle.net/sn625r3z/14/

要使新添加的元素可单击，您应该使用 jQuery 的“.on”函数并向其传递一个事件。像这样的事情:

$('img.new-image').on('click', function(){
    $(this).parent().css({background: 'green'});    
});

在 jsFiddle 示例中，我使用 CSS 定位图像。但如果你想获取坐标以将图像定位在 block 的末尾，我会这样做:

$('cposs').each(function(){
   var el = $(this);
   var width = el.width();
   var height = el.height();

   var newElement = $('<img class="new-image" src="'+imagetest.src+'" />');
   el.append(newElement);
   newElement.css({top: height+"px", left: width+"px"});
});

希望这有帮助。