Ukrywanie teksu i pokazywanie po kliknieciu

0

Witajcie, chcę stworzyć plugin jQuery który cenzurowałby komentarze które zawierają nieodpowiednie słowa. Komentarze były by dostępne po kliknięciu. Stworzyłem już skrypt który wyszukuje oraz oraz cenzuruje nieodpowiednie komentarze.

Mam problem z funkcjonalnością która ukrywałaby pod napisem cenzurowany tekst a potem go po kliknięciu udsłaniała go.
Poniżej zamieszczam mój kod:
HTML

div class="media" id="comments">
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          <p>asdasdasdasdasd</p>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          <p>jaty</p>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          <p>my</p>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          <p>wy</p>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          <p>oni</p>
        </div>
      </div>

JS

(function($) {
  $.fn.commentCensor = function() {
    $(this).find("p").each(function() {
      var textFieldValue;
      var censoredWords = new Array('ja', 'ty', 'oni');
      textFieldValue = $(this).text();
      for (var x = 0; x < censoredWords.length; x++) {
        if (textFieldValue.indexOf(censoredWords[x]) >= 0) { 
          $(this).replaceWith('<div class="censored"><p>Komentarz został ocenzurowany <span><a href="#" class="showOnClick">Kliknij aby pokazać</a></span></p></div>');
        }
      };
    });
  };
  $('#comments').commentCensor();
})(jQuery);
1

Można na przykład tak:

(function($) {
    $.fn.commentCensor = function() {
        $(this).find("p").each(function() {
            var censoredWords    = new Array('ja', 'ty', 'oni'),
                censoredFound    = false,
                censoredDiv      = $('<div class="censored"><p>Komentarz został ocenzurowany. <a href="#" onclick="return false;">Kliknij aby pokazać</a>.</p></div>'),
                commentParagraph = $(this),
                commentValue     = commentParagraph.text();
 
            if (censoredWords.length>0) {
                for (x in censoredWords) {
                    if (commentValue.indexOf(censoredWords[x])>=0) { 
                        censoredFound = true;
						break;
                    }
                }
            }
            if (censoredFound===true) {
                commentParagraph.hide().after(censoredDiv);
                censoredDiv.find('a').off().on('click',function() {
                    censoredDiv.remove();
                    commentParagraph.show();
                });
            }
        });
    };
    $('#comments').commentCensor();
})(jQuery);

1 użytkowników online, w tym zalogowanych: 0, gości: 1