[英]Update number on jQuery UI tooltips
我有带有工具提示的文件夹,例如“ 0个条目”或“ 5个条目”等。 每次将某些内容放入文件夹时,我都需要此工具提示号更新1。 标题并不总是从0开始 ,我需要更新$(this)drop div,因为我有很多。 这是工作小提琴http://jsfiddle.net/4ehSG/3
jQuery的
$(document).tooltip();
var dropped =0;
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
dropped++;
$( this )
.attr('title',dropped+' entries')
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( ".draggable" ).fadeOut();
}
});
的HTML
<div class="draggable ui-widget-content">
<p>Drag me to my target</p>
</div>
<div class="droppable ui-widget-header" title='2 entries'>
<p>Drop here</p>
</div>
这是您可以做什么的示例: http : //jsfiddle.net/4ehSG/9/
drop: function( event, ui ) {
var dropped = parseInt($(this).attr('title')) + 1;
$( this )
.attr('title',dropped+' entries')
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( ".draggable" ).fadeOut();
}
您可以在每次删除元素时增加一个变量
尝试这个
$(document).tooltip();
var num = 0;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
num++;
$( "#draggable" ).fadeOut();
$( "#droppable" ).attr("title", num + " entries");
}
});
您更新的示例: http : //jsfiddle.net/4ehSG/4/
如果您有多个droppable
和draggable
实例,则可能需要为每个droppable
分配一个与其关联的数组。 这样,您无需依赖count
对象,就可以将相同的draggable
对象draggable
到多个droppable
拖放对象上。
$(document).tooltip();
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
if(!$(this).data('droplist')){ //check for array
$(this).data('droplist', []); //if doesn't exist, create array
}
var droplist = $(this).data('droplist'),
drag = $(ui.draggable)[0];
if(droplist.indexOf(drag) === -1) //check if element exists in array
droplist.push(drag);
$( this )
.addClass( 'ui-state-highlight' )
.find( 'p' )
.html( 'Dropped!' )
.end()
.attr('title', droplist.length + ' entries');
$(this).data('droplist', droplist); //set list
}
});
$(document).tooltip();
var count = 0;
$("#draggable").draggable();
$("#droppable").droppable({
drop: function (event, ui) {
count++;
$(this)
.attr('title', count + ' entries')
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
$("#draggable").fadeOut();
}
});
您可以使用:
document.getElementById('droppable').title = value;
上面的代码行没有使用jQuery。
如果要使用jQuery,请使用以下命令:
$("#droppable").attr( 'title', value );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.