Question

我有一个img标签。点击后，我的CMS会从收藏夹区域添加或删除帖子。当帖子不在收藏夹中时，img看起来像：

<img src="plus_fav.png" onclick="doFavorites('5', 'plus'); return false;" title="Add to favorites">

当我点击它时，img看起来像：

<img src="minus_fav.png" onclick="doFavorites('5', 'minus'); return false;" title="Remove from favorites">

我想听取title属性的更改并将其写入某些<div id="some-id"></div>。如果img title="Add to favorites" document.ready我的代码在<div id="some-id">Add to favorites</div> <img src="plus_fav.png" onclick="doFavorites('5', 'plus'); return false;" title="Add to favorites">被解雇后将如下所示：

<div id="some-id">Remove from favorites</div>
<img src="minus_fav.png" onclick="doFavorites('5', 'minus'); return false;" title="Remove from favorites">

当我更改收藏状态时，代码将为：

.change()

我正在寻找title之类的内容，但会跟踪{{1}}属性。

Answer 1

让我们做吧！：）

如果您只有2个选项（2种标题文字 - 添加到收藏夹并从收藏夹中移除），此代码将起作用

首先我们采取var当前图像标题

var newTitle = $(".someclass img").attr('title'); // .someclass mean your img parent element class

在文档准备好后，将标题附加到#some-id。

titleChange();
function titleChange() {
    $("#some-id").html(newTitle);
}

然后我们需要在click上抓取img并在标题的相反值中更改newTitle。

$(".someclass img").click(function() {
  newTitleHolder = $(this).attr('title');
    if(newTitleHolder == 'Add to favorites') {
      newTitle = 'Remove from favorites';
    }else {
      newTitle = 'Add to favorites';
    }
  titleChange();
});

多数人。

如果您在页面上有很多具有相同父类的图像 - 只需将此代码放入.each()函数中。

Answer 2

<img id="img" src="plus_fav.png" onclick="doFavorites('5', 'plus',$(this)); return false;" title="Add to favorites">
<img src="minus_fav.png" onclick="doFavorites('5', 'minus',$(this)); return false;" title="Remove from favorites">


        function doFavorites(a,b,c)
        {
            if(b=='plus')
            {
                    $('#some-id').text('Remove from favorites');
                    c.attr('title','Remove from favorites');
                    c.attr('src','minus_fav.png');
                    c.attr('onclick','doFavorites('5', 'minus',$(this))');

            }else if(b=='minus')
            {
                    $('#some-id').text('Add to favorites');
                    c.attr('title','Add to favorites');
                    c.attr('src','plus_fav.png');
                    c.attr('onclick','doFavorites('5', 'plus',$(this))');
            }


        }

Answer 3

如果你想听属性，没有直接的方法，但你可以创建一个观察器，它将检查每个值并通知值是否已更新。

注意： 如果您有许多想要观看的图片，则可能会对性能产生影响。

代码

JSFiddle

var originalTitle = "";
var count = 0;
var watchInterval = null;

function updateTitle() {
  originalTitle = $("#img").attr("title");
  console.log("Updating Title")
  $("img").attr("title", "New Title " + count++);
  if (count > 5) {
    console.log("Clearing all intervals")
    window.clearInterval(watchInterval)
  }

  watcher(updateOriginalTitle);
}

function updateOriginalTitle() {
  originalTitle = $("#img").attr("title");
}

function watcher(callback) {
  var watchInterval = setInterval(function() {
    var currTitle = $("#img").attr("title");
    if (currTitle != originalTitle) {
      console.warn("Title has changed");
      if (callback && typeof(callback) === "function")
        callback();
    }
  }, 1000)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="test.jpg" id="img" title="test Image" onclick="updateTitle()">;

Answer 4

我不太了解......

但我认为你想：每次标题改变时都会写一个“日志”。

我会这样做：

首先确定img。

<img id="img" src="plus_fav.png" onclick="doFavorites('5', 'plus'); return false;" title="Add to favorites">

然后：

$(function(){
  $(document).on("change","#img",function(){
    var title = $(this).attr('title');
    $('#some-id').append(title);
  });
});

如何监听img title属性的更改？

4 个答案:

代码