如何切换元素的title属性？

Question

我有这个HTML：

<i class="fa fa-check" title="click to accept"></i>
<i class="fa fa-check checked" title="undo"></i>
<i class="fa fa-check" title="click to accept"></i>

如您所见，checked 类名，则该元素的标题必须为undo （此外，其他元素的标题必须为是click to accept）。我的意思是checked班级名称和undo标题必须唯一。

现在我正在切换类名，如下所示：

$('.fa-check').on('click', function(){
   $el = $(this);
   $el.not($el).removeClass('checked');
   $el.toggleClass('checked');
});

换句话说，我正在从所有元素中删除checked类，然后为点击的元素切换checked类。现在我想知道，我怎么能为title属性做同样的事情？

Answer 1

尝试使用$(this).attr('title')选中或取消选中该元素时，请尝试更改标题的属性。

<强>的jQuery

$('.fa-check').on('click', function() {
   $el = $(this);
   $el.not($el).removeClass('checked');
   $el.toggleClass('checked');

   var title = 'click to accept' ;
   if ($el.hasClass('checked')) {
      title = 'undo';
   }
   $el.attr('title', title);
});

<强> JSFiddle

Answer 2

prop优先于attr

例如：

$('.fa-check').on('click', function(){
   var $el = $(this);
   var title = $(this).prop('title');

   if(title === 'undo'){
     // Reset state
     $el.removeClass('checked').prop('title', 'click to accept');
   } else {
     // Mark as checked
     $el.addClass('checked').prop('title', 'undo');
   }
});

Answer 3

$('.fa-check').on('click', function(){
   $('.fa-check').removeClass('checked');
   $('.fa-check').attr('title','click to accept');
   $(this).toggleClass('checked');
   $(this).attr('title','undo');
});

Fiddle

Answer 4

不是这么简单：

$('.fa-check').on('click', function(){
    $('.fa-check').removeClass('checked').attr('title', 'click to accept');
    $(this).addClass('checked').attr('title', 'undo');
});

Answer 5

HTML：

<i class="fa fa-check"></i>
<i class="fa fa-check"></i>
<i class="fa fa-check"></i>

CSS：

.checked {color: red;}
.fa-check {cursor:pointer;}

JQUERY：

$('.fa-check').click(function() {
if($(this).attr('class')=='fa fa-check checked'){
    $(this).toggleClass('checked');
}else{
    $('.fa.fa-check.checked').removeClass('checked');
  $(this).toggleClass('checked');
}
});
$('.fa-check').mouseover(function() {
    $(this).attr('title','click to accept');
    $('.fa.fa-check.checked').attr('title','undo');       
});

您的HTML应该看起来像

<i class="fa fa-check" title="click to accept"></i>
<i class="fa fa-check" title="click to accept"></i>
<i class="fa fa-check" title="click to accept"></i>

你的观察应该看起来像这个

$('.fa-check').on('click', function(){
   $el = $(this);
   $elnot = $('.fa-check.checked');
   $elnot.not($el).removeClass('checked');
   $elnot.attr('title', 'click to accept');
   $el.toggleClass('checked');
   if($el.hasClass('checked')){
      title = 'undo';
   }
   $el.attr('title', title);
});

JSFiddle

YOUR EDITED JSFIddle

自动更改鼠标点击检查。也许这就是你要找的东西。