- You need to add arg in the strikeThrough function definition
- You cannot use
thisobject as the function is called on window scope, so the this would be referring to window object inside strikeThrough function. You could use.callor.applyto set the scope, but I don't see a need for it. - Changed the
data-itemto match the class name of the eachli
PS: Your question and your code speaks differently, so check out the demo and let me know your comments.
// Handle the picture item clicks$('.picItem').on('click', function() { //grab appropriate list item view data-item for strikeThrough function strikeThrough($(this).data('item')); $(this).fadeOut(400, function() {});});function strikeThrough(item) { var $item = $('.itemList li.'+ item); if ($item.hasClass('stroked')) { //already stroked return; } else { $item.addClass('stroked').prepend('<span class="linethrough"> </span>').find('span').css('width', $item.width()).addClass('movein'); }}.stroked { color: #282828; position: relative;}.linethrough { position: absolute; height: 10px; left: -200px; top: 0; text-decoration: line-through; white-space: pre; color: red; -webkit-transition: left 1s ease; -moz-transition: left 1s ease; -o-transition: left 1s ease; -ms-transition: left 1s ease; transition: left 1s ease;}.linethrough.movein { left: 0px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="picItem" data-item="dart"><img src="Dart.png" alt="Dart" /></div><div class="picItem" data-item="dice"><img src="Dice.png" alt="Dice" /></div><div class="itemWrapper"><ul class="itemList"><li class="olive">Olive</li><li class="dart">Dart</li><li class="dice">Dice</li></ul></div>