How to listen for changes to a img title attribute?

Question

I have a img tag. On click, my CMS adds or removes the post from a favorites area. When the post is not in favorites, the img looks like:

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

When I click on it, the img looks like:

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

I want to listen for changes for title attribute and write that into some <div id="some-id"></div> . If I have an img with a title="Add to favorites" my code will be like the following after document.ready is fired:

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

When I change the favorite status, the code will be:

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

I'm looking for something like .change() but that tracks the title attribute.

Answer 1

Lets do it! :)

This code will work if you have just 2 options (2 kinds of title text - Add to favorites and Remove from favorites)

At first we take to var current title of image

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

At document ready append title to your #some-id .

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

And then we need to catch click on img and change our newTitle in the opposite value of title.

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

Thats all.

And if you have a lot of images on page with same parent class - just put this code into .each() function.

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

If you want to listen to attribute, there is no direct way, but you can create a watcher that will check every for value and notify if value has updated.

Note: If you have a lot of images, on which you want to watch, this might have performance impact.

Code

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

I didn't understood very well...

But i think you want to: Everytime that the title changes it writes a "log".

I'd do:

First identify the img.

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

And then:

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