Question

我有一个标签列表和一组文本。

当光标悬停在标签上时，我希望突出显示文本正文中的匹配文本。当“活动”类存在时，我有用于突出显示测试和工作的CSS。

它们位于页面上的不同div中，因此兄弟或父css不起作用。

标签都有<span class="taghover">tag</span>

正文包含

中包含的相应单词/短语

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

在页面加载时，我希望每个标签都有

.hover(addActive(text), removeActive(text))

其中text是slugified短语。

<script type="text/javascript">
function slug(Text)
{
    return Text
        .toLowerCase()
        .replace(/ /g,'-')
        .replace(/[^\w-]+/g,'')
        ;
}

function makehover() {
    var spanElements = document.querySelectorAll(".taghover");
    for (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);
    for (var x of spanElements) {
            x.classList.add("active");
        }
}

function removeActive(newText) {
    slugClass = concat(".",newText)
    var spanElements = document.querySelectorAll(slugClass);
    for (var x of spanElements) {
            x.classList.remove("active");
        }
}

但是我在makehover（）

中收到错误SyntaxError: expected expression, got '.'

我做错了什么？

Answer 1

您的代码不使用jquery，并且有一些错误：

你没有声明函数悬停， concat 等等
addActive 和 removeActive 调用instant而不是作为回调传递

所以你可以像下面的代码片段一样修复它：

function slug(txt) {
  return txt
    .toLowerCase()
    .replace(/ /g, '-')
    .replace(/[^\w-]+/g, '');
}

function makehover() {
  var tags = Array.prototype.slice.call(document.querySelectorAll('.taghover'));
  for (var i 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));
    for (var i 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 for tag 1</span>
  <span class="tag-2">text for tag 2</span>
  <span class="tag-3">text for tag 3</span>
  <span class="tag-1">text for tag 1</span>
  <span class="tag-2">text for tag 2</span>
  <span class="tag-3">text for tag 3</span>
  <span class="tag-1">text for tag 1</span>
</div>

但是使用jQuery会很简单

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 for tag 1</span>
  <span class="tag-2">text for tag 2</span>
  <span class="tag-3">text for tag 3</span>
  <span class="tag-1">text for tag 1</span>
  <span class="tag-2">text for tag 2</span>
  <span class="tag-3">text for tag 3</span>
  <span class="tag-1">text for tag 1</span>
</div>

Answer 2

使用下面的jQuery查找一个工作示例。我建议您使用data-属性来存储在悬停<span>时应突出显示的容器类。

http://codepen.io/anon/pen/OVWELZ

＆＃13;

$(document).ready(function() {
  $(".hoveractivator").on('mouseover', function() {
    var attachedContainer = $(this).attr('data-container');
    $("[class^='item']").removeClass('active');
    $("."+attachedContainer).addClass('active');
  })
})

＆＃13;

.hoveractivator {
  background-color: #fff;
  padding: 10px 60px;
  border: 1px solid #999;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
.hoveractivator:hover:after {
  content: "Activator for container with class=\""attr(data-container)"\"";
  display: inline-block;
  position: absolute;
  bottom: -35px;
  left: 10px;
  white-space: nowrap;
  border: 1px solid #eee;
  padding: 5px;
  background-color: #eee;
}

.active {
  background-color: #ccc;
  margin-left: 20px;
}

.active:after {
  content: " now active!";
}

div[class^="item"] {
  transition-duration: 0.3s;
  padding: 20px;
  margin-top: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<br />
<br />
<span class="hoveractivator" data-container="item1">Item 1</span>
<span class="hoveractivator" data-container="item2">Item 2</span>
<span class="hoveractivator" data-container="item3">Item 3</span>
<span class="hoveractivator" data-container="item4">Item 4</span>
<br />
<br />
<br />
<div class="item1">ITEM 1 DIV</div>
<div class="item2">ITEM 2 DIV</div>
<div class="item3">ITEM 3 DIV</div>
<div class="item4">ITEM 4 DIV</div>

＆＃13;

使用JQuery .hover（）动态添加类

2 个答案: