Jquery:获取每个元素的“title”属性，而不仅仅是第一个

Question

我试图使用jQuery插件工具集显示每个元素的标题属性，并使用类“工具提示”。

但是不管出于什么原因，我只得到第一个元素的“标题”--页面上的每个元素。

<i class="tooltip game-1" title="219"></i>
<i class="tooltip game-2" title="30"></i>
<i class="tooltip game-3" title="122"></i>


    $(document).ready(function() {
        $('.tooltip').tooltipster({
           content: $(''+$(this).attr('title')+' people played this game')
        });
    });

我一遍又一遍地得到219个。

Answer 1

如果你使用的是引导或者仅仅是JQueryUI，你甚至不需要一个插件来提供工具提示。您可以将.tooltip()小部件用于基本工具提示，也可以将其与jquery ()一起用于客户端的错误处理。

使用tooltip()验证()是非常灵活的，因为您可以在元素中使用数据-attr来定义规则和消息，或者使用AddMethod函数。

AddMethod:

jQuery.validator.addMethod("math", function(value, element, params) {
  return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));

数据-attr

​

您可以将这样的内容用于筛选器/规则：

数据-组-类型=字符串数据-组^=开始

或

$("body").attr("data-seconds");
$('*[data-seconds="/[^0-9]+/"]');

或

​

我喜欢在.validate()中编写内联函数，使用条件循环使用.each函数显示或隐藏.tooltip()元素，并使用.valid()检查每个元素。

使用简单的.Tooltip()在.ready中或在.Validate():中

form = $("#id");
 // Create new tooltips for invalid elements
form.validate({

  showErrors: function(errorMap, errorList) {

      // Clean up any tooltips for valid elements
      $.each(this.validElements(), function (index, element) {
          $element = $(element);
          $element.data("title", "") // Clear the title - there is no error associated anymore
              .removeClass("error")
              .tooltip("destroy"); 
      });
      // Create new tooltips for invalid elements 
      $.each(errorList, function (index, error) {
          var $element = $(error.element);
// Destroy any pre-existing tooltip so we can repopulate with new tooltip content or disable and hide if .valid()
          $element.tooltip("destroy") 
              .data("title", error.message)
              .addClass("error")
              .tooltip("show"); // Create a new tooltip using the title
      });

//OR SIMPLY
$('input').each(function(){
    if(this.valid())
     this.tooltip("hide disable");
    else
     this.tooltip("show enable");
    });
  },
rules: {
     "math" :{
    required: {depends: "id:checked"}
}
},
messages: {
  "math" :{
    required: "{0} + {1} does not equal the amount entered"
}
},
  submitHandler: function(form) {
      //process form using ajax,.submit(), or whatever
  }
});

记住，剥猫皮的方法不止一种，所以你可能不得不做出修改，考虑到你可能有多种形式和多种条件，基于选择。在这种情况下，可以在AddMethod functions中使用依赖项。我知道这个问题只是关于工具提示，但我想我会扩展一点，以帮助人们朝着正确的方向前进，因为工具提示通常与验证相关。