隐藏使用行中的特定元素反应JS

我有div元素的阵列，如下所示： -隐藏使用行中的特定元素反应JS

var accdata = []; 
for(var i = 0;i < returndata1.length;++i){ 
accdata.push(
<div className="data-main" onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}> 
    <span className="data-child">{returndata1[i].Project}</span> 
    <span className={this.state.cls}> 
     <span className="flag"></span> 
     <span className="share"></span> 
     <span className="star"></span>     
    </span> 
</div> 
); 
}

//toggle function 
toggleHover(){ 
    this.setState({hover: !this.state.hover}) 
    if(this.state.hover === true){ 
     this.setState({cls: 'icon-display'}) 
    } 
    else{ 
     this.setState({cls: ''}) 
    } 
}

但在鼠标悬停所有部门的跨度元件消失。我如何设置，如果我们将鼠标悬停在特定的行上，只有该行的span元素消失？

来源

2015-11-02 Dhanya

我看不出有任何阵列。请提供一个**完整的**，但最小的例子。同时请记住，在整个页面中ID必须是**唯一**。 –

我很抱歉。现在我发布了我的最新代码。我删除了该ID。 – Dhanya

您必须记住某处/某处的悬停行的索引，并且仅将该类应用于该行。这可能是将此div封装到新组件中的好机会。 –

最简单的方法是使用css。下面是使用一些通用的CSS类的例子：http://jsfiddle.net/9utga8ya/2/

阵营：

var accdata = []; 
for(var i = 0;i < returndata1.length;++i){ 
    accdata.push(
     <div className="data-main"> 
      <span className="data-child">{returndata1[i].Project}</span> 
      <span className="icon-display"> 
       <span className="flag"></span> 
       <span className="share"></span> 
       <span className="star"></span>     
      </span> 
     </div> 
    ); 
}

CSS：

.data-main .icon-display { 
    display: inline; 
} 

.data-main:hover .icon-display { 
    display: none; 
}

来源

2015-11-03 15:21:50

隐藏使用行中的特定元素反应JS

回答

相关问题