javascript - Dynamically adding classes using JQuery .hover() -

i have list of tags , body of text.

when cursor hovers on tag, i'd matching text in body of text highlighted. have css highlighting tested , working when class "active" present.

they in different divs on page, sibling or parent css doesn't work.

the tags have <span class="taghover">tag</span>

the body text has appropriate words/phrases wrapped in

<span class="highlight (slugified phrase)">phrase</span> 

on page load, i'd each of tags have

.hover(addactive(text), removeactive(text)) 

where text slugified phrase.

<script type="text/javascript"> function slug(text) {     return text         .tolowercase()         .replace(/ /g,'-')         .replace(/[^\w-]+/g,'')         ; }  function makehover() {     var spanelements = document.queryselectorall(".taghover");     (var x of spanelements) {             var ih = slug(x.innerhtml);             .hover(addactive(ih), removeactive(ih));             /* x.hover(addactive(ih), removeactive(ih)); */          } }  function addactive(newtext) {     slugclass = concat(".",newtext)     var spanelements = document.queryselectorall(slugclass);     (var x of spanelements) {             x.classlist.add("active");         } }  function removeactive(newtext) {     slugclass = concat(".",newtext)     var spanelements = document.queryselectorall(slugclass);     (var x of spanelements) {             x.classlist.remove("active");         } } 

but i'm getting error syntaxerror: expected expression, got '.' in makehover()

what doing wrong?

you code not use jquery, , have few errors:

• you not declare function hover, concat , etc
• addactive , removeactive call instant instead passed callback

so can fix in code snippet below:

function slug(txt) {    return txt      .tolowercase()      .replace(/ /g, '-')      .replace(/[^\w-]+/g, '');  }    function makehover() {    var tags = array.prototype.slice.call(document.queryselectorall('.taghover'));    (var in tags) {      var tag = tags[i];      var tagclass = slug(tag.innerhtml);      addhover(tag, hoverhandler(tagclass, 'add'), hoverhandler(tagclass, 'remove'));    }  }    function hoverhandler(spanclass, action) {    return function() {      this.classlist[action]('active');      var spans = array.prototype.slice.call(document.queryselectorall('.' + spanclass));      (var in spans) {        var span = spans[i];        span.classlist[action]('active');      }    }  }    function addhover(span, handlerin, handlerout) {    span.addeventlistener('mouseenter', handlerin.bind(span));    span.addeventlistener('mouseleave', handlerout.bind(span));  }    makehover();

.taghover {    display: inline-block;    border-radius: 3px;    border: 1px solid #4444ff;    background-color: #96fffb;    color: #0015ef;    margin-left: 5px;    padding: 3px;  }  .active {    background-color: #aaffaa;  }

<div>tags:<span class="taghover">tag 1</span><span class="taghover">tag 2</span><span class="taghover">tag 3</span>  </div>  text  <div>    <span class="tag-1">text tag 1</span>    <span class="tag-2">text tag 2</span>    <span class="tag-3">text tag 3</span>    <span class="tag-1">text tag 1</span>    <span class="tag-2">text tag 2</span>    <span class="tag-3">text tag 3</span>    <span class="tag-1">text tag 1</span>  </div>

but using jquery simple

function slug(txt) {    return txt      .tolowercase()      .replace(/ /g, '-')      .replace(/[^\w-]+/g, '');  }    $('.taghover').hover(function(){    $('.'+slug(this.innerhtml)).addclass('active');    }, function(){    $('.'+slug(this.innerhtml)).removeclass('active');  })

.taghover {    display: inline-block;    border-radius: 3px;    border: 1px solid #4444ff;    background-color: #96fffb;    color: #0015ef;    margin-left: 5px;    padding: 3px;  }  .active {    background-color: #aaffaa;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div>tags:<span class="taghover">tag 1</span><span class="taghover">tag 2</span><span class="taghover">tag 3</span>  </div>  text  <div>    <span class="tag-1">text tag 1</span>    <span class="tag-2">text tag 2</span>    <span class="tag-3">text tag 3</span>    <span class="tag-1">text tag 1</span>    <span class="tag-2">text tag 2</span>    <span class="tag-3">text tag 3</span>    <span class="tag-1">text tag 1</span>  </div>