使用jQuery切换更改属性标题

Question

我可以用我的代码更改值。我想在点击data-original-title test-1更改为test-2时更改属性值jQuery切换。我怎么能这样做？

<i class="heart fa fa-heart" id="demo1" data-toggle="tooltip" data-placement="top" title="" data-original-title="test-1"></i>

$("#demo1").click(function() {
  $(this).attr("data-original-title", "test-2");
}

Answer 1

这样对我有用。查看更改的注释并更正语法错误：

$(function () { // Add this ready function.
  $(".fa").tooltip();
  $("#demo1").click(function() {
    // Use a ternary function to change the tooltip when clicked.
    $(this).attr("data-original-title", $(this).attr("data-original-title") == 'test-2' ? "test-1" : "test-2" );
  }); // Error here.
}); // Add this as well.

body {margin: 25px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<i class="heart fa fa-heart" id="demo1" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="test-1"></i>

请记住：工具提示的更改不是即时的。只有在您单击并隐藏当前工具提示后，它才会更改。

预览

首先点击：

第二次点击：

第三次点击：

等等......

Answer 2

您可以使用1-127这样简单地切换attribute

ternary if statement

＆＃13;

＆＃13;

$(this).attr("data-original-title",$(this).attr("data-original-title")=='test-2' ?  "test-1" : "test-2"  );

＆＃13;

  $("#demo1").click(function() {

        $(this).attr("data-original-title",$(this).attr("data-original-title")=='test-2' ?  "test-1" : "test-2"  );
        console.log($(this).attr("data-original-title"));

    });

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

$("#demo1").click(function() {
  var val = $(this).attr("data-original-title");
  if(val == 'test-2') {
    $(this).attr("data-original-title", "test-1");
  } else {
    $(this).attr("data-original-title", "test-2");
  }
    
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用data()代替attr()。其次，你可以使用on()，以防万一，动态添加元素。只需将鼠标悬停在检查结果上即可：

＆＃13;

＆＃13;

$(function() {
  $(".fa").tooltip();
});

$("#demo1").on('click', function() {
  $(this).attr("data-original-title", $(this).attr("data-original-title") == 'test-2' ? "test-1" : "test-2");
});

＆＃13;

body {
  margin: 25px;
}

#demo1 {
  cursor: pointer;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<i class="heart fa fa-heart" id="demo1" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="test-1"></i>

＆＃13;

＆＃13;

＆＃13;