更新 jQuery UI 工具提示上的数字

Update number on jQuery UI tooltips

本文关键字：数字 工具提示 jQuery UI 更新      更新时间：2023-09-26

我有带有工具提示的文件夹，例如"0 个条目"或"5 个条目"等。每次将某些内容放入文件夹时，我需要此工具提示编号更新 1。标题并不总是从零开始，我需要更新 $（this） dropdiv，因为我有很多。这是工作小提琴 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放在多个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 );
相关文章：