Geek Answers Handbook

JQuery - as soon as an element is clicked, take the data element for li and apply a strike to the text in li (animate?)

I have a bunch of images that match a list containing their names. When you click on an image, the image disappears, and then the data item finds its corresponding name in the list, then crosses it out in red and changes the word of the list item to gray. I have code, but it does not work or does not cause any errors in the console. I am new to jQuery.

How can I associate a clicked image with the correct list name and then change the font color to gray and give it a different color (red) punch? I would like to revive the punch, but it can be too complicated. Advice is welcome :)

Any help is appreciated!

Here is the code snippet:

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');
  }
}
+4
2
  • arg strikeThrough
  • this, , strikeThrough. .call .apply, , .
  • data-item li

PS: -, .

// 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>
Hide result
+3

, , strikeThrough(), , , .

, strikeThrough() :

function strikeThrough(obj) {
 $('.itemList li').each(function() {
      if ($(this).text() == obj)
          $(this).addClass('stroked').addClass('found');
 });
}

: http://jsfiddle.net/ph5z3pwx/

: JavaScript ?

+1

More articles:


All Articles