Question

我有以下用例，动态生成<li>和<tr>（不同数量）：

如果我将<li> 第1点悬停在timeline上，我想更改包含文字的background-color <tr> ＆＃34;第1点$ 2.90＆＃34; 在右边的table中：

时间轴

<!-- start timeline -->
<ol class="timeline">
  <li class="timeline dot">
    Point 1
  </li>
  <li class="timeline dot">
    Point 2
  </li>
  <li class="timeline dot">
    Point 3
  </li>
</ol>
<!-- end timeline -->

表格

<!-- start table -->
<table class="mdl-data-table services" width="100%">
  <thead>
    <tr>
      <th class="mdl-data-table__cell">Beschreibung</th>
      <th>Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell">Point 1</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell">Point 2</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell">Point 3</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>
<!-- end table -->

如何使用jQuery实现这一点？它应该是一种通用方法，因为必须动态生成<li>和<tr>元素。

附加数据属性以区分元素是否有用？

Answer 1

这样的事情可以让你开始。

$(this)指的是悬停元素

.index()用于查找悬停元素的索引

选择器是通用的，并且知道动态添加到DOM的元素，而mouseenter和mouseleave往往不如.hover()挑剔（如果你将鼠标悬停在在一个元素真的很快，它''spazz out'是最好的，我可以描述它）

$(document).ready(function() {
	$('ol.timeline').on('mouseenter', 'li.timeline.dot', function() {
    	var index = $(this).index() + 1;
        $('table.mdl-data-table.services tbody tr:nth-child(' + index + ')').css('background-color', 'gray');
    }).on('mouseleave', 'li.timeline.dot', function() {
    	var index = $(this).index() + 1;
        $('table.mdl-data-table.services tbody tr:nth-child(' + index + ')').css('background-color', '');
    });
});

ol {
    display: inline-block;
    width: 200px;
}
table {
    display: inline-block;
    width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="timeline">
  <li class="timeline dot">
    Point 1
  </li>
  <li class="timeline dot">
    Point 2
  </li>
  <li class="timeline dot">
    Point 3
  </li>
</ol>
<table class="mdl-data-table services">
  <thead>
    <tr>
      <th class="mdl-data-table__cell">Beschreibung</th>
      <th>Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell">Point 1</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell">Point 2</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell">Point 3</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

Answer 2

我猜你在寻找这样的东西：

如果您只有一个名为timeline和services 的班级，则此仅适用。如果不止一个，就会有冲突而且不起作用。

因此，在这种情况下，请为这两者提供唯一class或id ，然后尝试。

<强> Working : Demo

<强> CSS

.addBackground
{
    background:#333;
    color:#ccc;
}

<强> JQuery的

$("ol.timeline li").hover(
    function(event){
        var curHover = $(this).index();
        curHover = curHover + 1;
        $(".services tbody tr:nth-child(" + curHover + ")").addClass("addBg");

    },function() {
     $(".services tbody tr").removeClass("addBackground");
  }
);

Answer 3

Haven没有尝试过下面的代码，但这些内容应该有效。

$('li.timeline').on("hover", function () {
    var index = $('ol.timeline li').index($(this)),
        correspondingTr = $('.mdl-data-table td.mdl-data-table__cell')[index];

    correspondingTr.css('background-color', 'black');
});

我们在这里做的是获取列表项的位置并使用它来获取相应的tr。然后将tr设置为黑色。

我还建议添加一些类以使选择更容易。

Answer 4

根据您的需要，这很可能会起作用

$(li.timeline.dot).hover(function(index){
     $(tbody .mdl-data-table__cell)[index].css({"backgroundColor":"#cc00cc"});
});

Answer 5

<?php $business = $model->reviewBusinesses;
    $i = 0;
    foreach ($business as $business_key) {
        $c = $business_key->rating;
        ?>
        <div class="ratings"> <!--use class in order to show rating horizontally -->
        <?php 
        $this->widget('ext.DzRaty.DzRaty', array( 
        'name' => 'rating_'.$i,
        'value' => $c,
        'options' => array(
            'readOnly' => TRUE,
            ),
        'htmlOptions' => array(
            'id' => 'rating_'.$i,
        ),
        )); ?>
        </div>
      <?php 
        $i++;
    }
?>

使用jQuery更改动态生成元素的背景颜色

5 个答案: