显示/隐藏在各自的选择多选择

我是新来的Jquery，我有一个要求，以显示额外的文本，只有当在各自的行显示/隐藏在各自的选择多选择

鼠标悬停我怎样才能改变我的jQuery的片段，而无需编写相同的代码片段10次为10个不同的选择

这里的代码：

<html> 
<head> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
    <script > 
     jQuery(function() { 

     $("#demoTable1").hide(); 
     $("#demo1").mouseover(function() { 
       $("#demoTable1").show(); 
      }); 
      $("#demo1").mouseout(function() { 
       $("#demoTable1").hide(); 
      }); 

     $("#demoTable2").hide(); 
     $("#demo2").mouseover(function() { 
       $("#demoTable2").show(); 
      }); 
      $("#demo2").mouseout(function() { 
       $("#demoTable2").hide(); 
      }); 

     }); 
    </script> 
<style> 
    tr { 
      background: #b8d1f3; 
      } 

     td { 
      font-size: 12px; 

      color: #000; 
      } 
</style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td id='demo1'> Service : All services are running 
       <div id='demoTable1'> some text here 1 </div> 
      </td> 
     </tr> 
     <tr> 
      <td id='demo2'> Service : All services are running 
       <div id='demoTable2'> some text here 2 </div> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

来源

2017-10-19 sunny

为此，您可以使用纯CSS，只要确定你是想展现的元素是父后直接。

.child { 
 
    display: none; 
 
} 
 
.parent:hover .child { 
 
    display: inline; 
 
}

<div class="parent">Hover over me 
 
    <div class="child">I will appear</div> 
 
</div>

来源

2017-10-19 15:40:47

非常感谢......它完全符合我的要求。它的工作现在 – sunny

不客气！如果它正确回答您的问题，请将其标记为正确答案。 –

你可以是这样的：

$("[id^='demoTable']").hide(); 
 
$("[id^='demo']").mouseover(function() { 
 
    $(this).find("div").show(); 
 
}); 
 
$("[id^='demo']").mouseout(function() { 
 
    $(this).find("div").hide(); 
 
});

tr {background: #b8d1f3;} 
 
td {font-size: 12px;color: #000;padding: 10px;} 
 
div {padding: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td id='demo1'> Service : All services are running 
 
     <div id='demoTable1'> some text here 1 </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td id='demo2'> Service : All services are running 
 
     <div id='demoTable2'> some text here 2 </div> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2017-10-19 15:40:34

你正在寻找被称为 '不重复自己'，或干燥技术。在你的情况下最简单的方法是使用class属性来将具有通用功能的元素分组。然后，您可以在附加到这些元素的事件处理程序中使用DOM遍历来查找相关内容并对其进行修改。

在这种情况下，你可以使用hover()事件toggle()孩子div元素，像这样：

jQuery(function($) { 
 
    $(".demo").hover(function() { 
 
    $(this).find(".demo-table").toggle(); 
 
    }); 
 
});

tr { background: #b8d1f3; } 
 
td { 
 
    font-size: 12px; 
 
    color: #000; 
 
} 
 
.demo-table { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="demo"> Service : All services are running 
 
     <div class="demo-table"> some text here 1 </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="demo"> Service : All services are running 
 
     <div class="demo-table"> some text here 2 </div> 
 
    </td> 
 
    </tr> 
 
</table>

有了这样说，JS是不是最好的技术为此使用。 CSS是更为合适，使用:hover伪选择：

tr { background: #b8d1f3; } 
 
td { 
 
    font-size: 12px; 
 
    color: #000; 
 
} 
 
.demo-table { display: none; } 
 
.demo:hover .demo-table { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="demo"> Service : All services are running 
 
     <div class="demo-table"> some text here 1 </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="demo"> Service : All services are running 
 
     <div class="demo-table"> some text here 2 </div> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2017-10-19 15:40:54

不完全是“最简单的”，因为使用纯CSS也可以工作 –

@JaredBledsoe最简单的说法是指DRY JS解决方案。我正在编辑过程中的完整答案:) –

参数化的jQuery应该很容易。为每个td提供一个'demo'类和一个内部div'demoTable'类。那么你可以做点什么吧：

$(".demo").mouseover(function() { 
    $(this).find(".demoTable").show(); 
}); 
$(".demo").mouseout(function() { 
    $(this).find(".demoTable").hide(); 
});

来源

2017-10-19 15:41:16 TKoL

显示/隐藏在各自的选择多选择

回答

相关问题