Question

我在制作简单的东西时遇到了一些麻烦。我有一个大的数据表，我希望在悬停任何列时，在页面外的某个地方，在表格外部加载一个特定的div（每列不同）。

我应该怎么做？我在定义列时遇到了问题（我使用了jquery dataTables），然后找到了为每列加载不同图像的方法。

这是我目前的代码，不考虑列：

$('td').hover(function() {
    var myClass = $(this).attr("class");
    /* hide any previously loaded div */
    $(".loaded").hide();
    /* load my new div with the content I need */
    $("#"+myClass).show();
});

HTML：

<thead>
    <tr>
        <th class="sp1">SP1</th>
        <th class="sp2">SP2</th>
        <th class="bb1">BB1</th>
        <th class="br1">BR1</th>
        <th class="br2">BR2</th>
        <th class="br3">BR3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="sp1">xxx</td>
        <td class="sp2">xxx</td>
        <td class="bb1">xxx</td>
        <td class="br1">xxx</td>
        <td class="br2">xxx</td>
        <td class="br3">xxx</td>
    </tr>
    ....
</tbody>

谢谢！

Answer 1

我不确定这是否是您想要的，但请查看：

此代码将显示您在另一个div中悬停的div的名称。

https://jsfiddle.net/5jy071t5/4/

<强> HTML

<ul>
  <li name="first">Hoover me</li>
  <li name="second">And me</li>
</ul>

<div id="output"></div>

<强>的Javascript

$( "li" ).hover(
  function() {
    $("#output").html($(this).attr("name"));
      //you can also load an image if you like
  }, function() {
    $("#output").html("");
  }
);

Answer 2

它充当魅力。也许你错过了id或class。

＆＃13;

$('td').hover(function() {
    var myClass = $(this).attr("class");
    /* hide any previously loaded div */
    $(".loaded").hide();
    /* load my new div with the content I need */
    $("#"+myClass).show();
});

＆＃13;

.loaded{
  display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
    <tr>
        <th class="sp1">SP1</th>
        <th class="sp2">SP2</th>
        <th class="bb1">BB1</th>
        <th class="br1">BR1</th>
        <th class="br2">BR2</th>
        <th class="br3">BR3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="sp1">xxx</td>
        <td class="sp2">xxx</td>
        <td class="bb1">xxx</td>
        <td class="br1">xxx</td>
        <td class="br2">xxx</td>
        <td class="br3">xxx</td>
    </tr>
</tbody>
</table>
<div id="sp1" class="loaded">sp1</div>
<div id="sp2" class="loaded">sp2</div>
<div id="bb1" class="loaded">bb1</div>
<div id="br1" class="loaded">br1</div>
<div id="br2" class="loaded">br2</div>
<div id="br3" class="loaded">br3</div>

＆＃13;

表列悬停加载单独的div

2 个答案: