Utilizing an angular directive to display a page with left and right columns using
<left-column></left-column><right-column></right-column><a href="#target1">Target 1</a><div id="target1">Target 1</div>Everything is functioning as expected, and now the goal is to make the specific div's background flash or exhibit some visual effect upon being clicked, by toggling a CSS class. The intention is to add this class temporarily, and then remove it after a brief delay.
Attempting to achieve this using a setTimeout() function, however, it's not producing the desired outcome. Any suggestions?
The encountered error message reads:
Uncaught TypeError: Cannot read property 'toggleClass' of undefined
The corresponding JavaScript code snippet is as follows:
var highlight = {
onReady: function() {
$(document).on('click', 'left-column > div', function(event) {
var id = $('a', this).attr('href').split('#');
var target = $('right-column > div').find('#' + id[1]);
target.toggleClass('gas');
var junk = setTimeout(function(target) {
target.toggleClass('gas');
}, 1000);
event.preventDefault();
});
}
};
$(document).ready(highlight.onReady);