有没有办法将坐标保存为跨度的属性

Is there any method to save coordinates as attribute of span?

本文关键字:属性 保存 坐标 有没有      更新时间:2023-09-26
 jQuery(window).load(function() {
    jQuery("#form_panel").hide();
    $('#addTag').on('click', function(e) { //creates span dynamically
        $('#demo').append('<span class="tags" id="' + $('#title').val() + '" data-y="' + 'pos_y' + '" data-x="' + 'pos_x' + '">' + $('#title').val() + ', </span>');
        console.log("#addTag'");
        console.log(pos_x);
        console.log(pos_y);
    });

    jQuery(".tags").live("mouseover", function() {
        // $(this).find(".tagged_box").css("background-color","yellow");
        console.log("mouseover");
        console.log(this.id);
        console.log(pos_y);
        console.log(this.data - y); // NaN
        //over();

    });
})

这是我的代码段,用于控制台.log(this.data-y);它给出了NaN,其余代码工作正常。(pos_x和pos_y是数字)。

如果我理解正确,您想在 span 中保存一些数据。为此,您可以使用html5的数据属性来了解如何执行此操作,请在此处查看此示例。希望有帮助。

jQuery(window).load(function(){
  jQuery("#form_panel").hide();
  jQuery('#addTag').on('click',function (e) {  //creates span dynamically
    var append_string = '<span class="tags" id="'+jQuery('#title').val()+'" data-y="'+y_pos+'" data-x="'+x_pos+'">'+jQuery('#title').val()+', </span>'
    jQuery('#demo').append(append_string);
  });
  jQuery(".tags").live("mouseover",function(){
    var ids = jQuery(this).attr('id');
    var x_cord = jQuery(this).attr('data-x');
    var y_cord = jQuery(this).attr('data-y');
    console.log("mouseover");console.log(ids);
    console.log(x_cord);console.log(y_cord);
    jQuery("#overshow").css({top: y_cord, left: x_cord, width:'100px', height:'100px', position:'absolute',border:'3px solid gray'});                   
    jQuery('#overshow').show('fast').delay(1000).hide('slow');
  });       
});

我在 jQuery(window).load(function(){} 之外声明了两个变量 x_pos 和 y_pos;它们可供 中的所有函数访问。