jQuery - once item is clicked, grab data-item for li and apply a strike through to text in li (animate?)

Question

I have a bunch of images that correspond to a list containing their names. When the image is clicked it fades out the image then using data-item finds its corresponding name on the list and then crosses it out in red and changes the list item word to grey. I have code but it is not working or throwing any errors in console. I am new to jQuery.

How would I connect the clicked image with the correct list name and then change the font color to grey and give it a different color (red) strike through? I'd love to animate the strike through but that may be too involved. Advice is welcome :)

Any help is appreciated!

Here is a snippet of the code:

CSS

.stroked {
  text-decoration: line-through;
  color: red;
}

.found {
  color: #282828!important;
}

HTML

<!--image items-->
<div class="picItem" data-item="Dart">
  <img src="Dart.png" />
</div>

<div class="picItem" data-item="Dice">
  <img src="Dice.png" />
</div>

<div class="itemWrapper">
  <ul class="itemList">
    <li class="olive">Olive</li>
    <li class="dart">Dart</li>
    <li class="dice">Dice</li>
  </ul>
</div>
<!-- /itemWrapper -->

JS

 // 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() {
     if ($('.itemList li').hasClass('stroked')) {
      return;
  } else {
      $(this).addClass('stroked');
      $(this).addClass('found');
  }
}

Answer 1

1. You need to add arg in the strikeThrough function definition
2. You cannot use this object as the function is called on window scope, so the this would be referring to window object inside strikeThrough function. You could use .call or .apply to set the scope, but I don't see a need for it.
3. Changed the data-item to match the class name of the each li

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>