Javascript 如何切换元素的title属性？

我有这个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类，然后为单击的元素切换checked类。现在我想知道，如何对title属性执行相同的操作？

当使用$this.attr'title选中或取消选中元素时，尝试更改title的属性

jQuery

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');
   }
});

这不是很简单吗

HTML:

JQUERY：

您的HTML应该如下所示

---

鼠标单击时自动更改检查。也许这就是你想要的。

$el.不是$el.removeClass'checked'没有意义。为什么不使用复选框？你怎么能指望一个不会使用鼠标的人能够点击呢？@zzzzBov我正在关注他所做的。。它不使用复选框来标记答案为已接受的答案。@stack，以解释无法访问的设计决策。SO背后的开发者是人类，因此并不完美。这是其中一种情况，在这种情况下，你最好不要跟随他们的领导。@stack，如果我没有注意到这样做包括单独的键盘控件来导航网站点击？如果$This已经是一个公认的答案，会发生什么？不是将被标记为已接受答案的新答案。。！这就是为什么我使用toggleClass而不是addClass。当$this已经是一个公认的答案时会发生什么？不是将被标记为已接受答案的新答案。。！这就是我使用toggleClass而不是addClass的原因。在您的原始代码中，您似乎试图删除所有选中的类并将其添加回单击的类。这就是它的作用。你还想做别的事吗？是的。。我正试着做些别的事。。我正在尝试删除除$this元素之外的所有选中类。因为我需要知道当前元素是撤消还是标记为已接受。所以如果我删除所有的ckecked类，就没有任何线索知道了。啊，好吧。我更新了我的例子，做我认为你想做的。没问题。谢谢这不会切换当前标题。它总是为$this元素设置undo。同时，当您单击该类时，它总是将该类切换为“checked”，因为以前它没有“checked”

$('.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);
});

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

$('.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');
   }
});

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

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

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

$('.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');       
});

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