Question

我是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>

Answer 1

您可以使用纯CSS执行此操作，只需确保您要显示的元素直接位于父级之后。

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

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

Answer 2

你可以这样：

$("[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>

Answer 3

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

在这种情况下，您可以将hover()事件用于toggle()子div元素，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

说到，JS并不是最好的技术。 CSS更合适，使用:hover伪选择器：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

参数化jquery应该很容易。给每个td一个＆＃39;演示＆＃39;而内部div是一个“demoTable”类。然后你可以做点什么：

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

在相应的选择器上显示/隐藏多个选择器

4 个答案: