Question

你好我使用jquery我想添加一个href标签，但只是当鼠标在.field-item.eve或.fiend-item.odd我尝试：悬停，但是不能删除href，我有这个代码：

<div class="field field-name-field-palabras-clave field-type-text field-label-inline clearfix">
<div class="field-label">Tags:</div>
    <div class="field-items">
        <div class="field-item even">shoes
            <div class="icon-more_link"></div>
        </div>
        <div class="field-item odd">tennis
            <div class="icon-more_link"></div>
        </div>
    </div>

我想补充一点：

<div class="field field-name-field-palabras-clave field-type-text field-label-inline clearfix">
<div class="field-label">Tags:</div>
    <div class="field-items">
        <a href="search/shoes">
            <div class="field-item even">shoes
                <div class="icon-more_link"></div>
            </div>
        </a>
        <a href="search/tennis">
            <div class="field-item odd">tennis
                <div class="icon-more_link"></div>
            </div>
        </a>
    </div>

这是我的jquery代码：

jQuery('.field.field-name-field-palabras-clave.field-type-text.field-label-inline.clearfix .field-items .field-item').hover(function(){
var link = jQuery(this).text().trim(); 
jQuery(this).wrap('<a href="search/'+ link +'"></a>');
});

但是当鼠标离开.field-item元素时，我无法移除href，你能帮我吗

Answer 1

jQuery('.field.field-name-field-palabras-clave.field-type-text.field-label-inline.clearfix .field-items .field-item').mouseenter(function() {
  var link = jQuery(this).text().trim();
  jQuery(this).wrap('<a href="search/' + link + '"></a>');
}).mouseleave(function() {
  var link = jQuery(this).text().trim();
  jQuery(this).unwrap(jQuery(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field field-name-field-palabras-clave field-type-text field-label-inline clearfix">
  <div class="field-label">Tags:</div>
  <div class="field-items">
    <div class="field-item even">shoes
      <div class="icon-more_link"></div>
    </div>
    <div class="field-item odd">tennis
      <div class="icon-more_link"></div>
    </div>
  </div>

使用.mouseenter()

描述：绑定一个事件处理程序，当鼠标进入元素时触发，或触发元素上的处理程序。

使用.mouseleave()

描述：绑定一个事件处理程序，当鼠标离开元素时触发该事件处理程序，或者触发元素上的处理程序。

当鼠标结束时，Jquery添加href标记，当鼠标离开时删除

1 个答案: