Question

 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();


    });
})

这是我的代码段和console.log（this.data-y）;它给NaN，休息代码正常工作。（pos_x和pos_y是数字）。

Answer 1

如果我理解正确，你想在span中保存一些数据。为此你可以使用html5的数据属性来解决这个问题，看一下这个例子here。希望有所帮助。

Answer 2

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;所有功能都可以访问。

有没有任何方法可以将坐标保存为span的属性？

2 个答案: