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>文本的末尾显示一个图像。而不是固定坐标。
我希望这些图像在点击时执行一个功能。（尝试添加＆＃34; onclick＆＃34;属性，但表示功能未定义）
最后，我希望可点击的图片能够突出显示cposs标签之间的文字。与我现在的相似，但不是鼠标悬停，而是点击事件。

编辑：我试图在附加图像上添加onclick属性，但是一旦单击图像，就表示函数未定义。我不确定如何获得cposs标签的坐标。如果我能够在javascript中使用偏移和/或位置功能，我很困惑。我试图使用两者并且没有成功。我想我是否真的需要知道如何获得cposs标签的结束坐标以及如何为每个显示的图像提供可点击的功能

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

Answer 1

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

要使新添加的元素可点击，您应该使用jQuery＆＃34; .on＆＃34;函数并将事件传递给它。像这样：

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

在jsFiddle示例中，我使用CSS定位图像。但是如果你想获得坐标来将图像定位在块的末尾，我会这样做：

$('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"});
});

希望这有帮助。

Javascript：在每个段落末尾显示可点击的图片

1 个答案: