通过选择带有 Id 的图像来更改带有 Id 的文本答案

【问题标题】：change text with Id by selecting an image with Id通过选择带有 Id 的图像来更改带有 Id 的文本
【发布时间】：2016-12-07 13:21:51
【问题描述】：

我有一个查询，它在鼠标悬停在图像上时对列表项的文本进行更改，我在查询中放置了一个事件目标：

    $('img').on('mouseover', function(){
     // I would like an Id of a text instead of the 'li'
      $('li').css('text-decoration', 'underline');
    });

    $('img').on('mouseout', function(){
      $('li').css('text-decoration', 'none');
    });

但我希望将其更改仅应用于与图像具有相同 ID 的项目：

s[i++] = '<li id=\"'+  vizList[j].name +'\">';
s[i++] =  '<a>'+ vizList[j].name + '</a>';
s[i++] =  '<img id=\"'+  vizList[j].name +'\" src="../renderer/bundles/' + vizList[j].icon + '" width="268" height="120" style="display:block"/>';
s[i++] = '</li>';

【问题讨论】：

ID 在 HTML 文档中必须是唯一的

标签： javascript jquery css image jquery-selectors

【解决方案1】：

下面的代码是你所期望的吗？

$('img').on('mouseover', function(event){
  $(event.target).closest('li').css('text-decoration', 'underline');
});

$('img').on('mouseout', function(event){
  $(event.target).closest('li').css('text-decoration', 'none');
});

【讨论】：

【解决方案2】：

首先，ID 应该是唯一的，所以要么让它们稍微不同，要么使用类。

将您的 $('li') 选择器更改为 $(this).find('li')。那应该在悬停的li中找到图像

您也可以使用.hover 函数将其转换为一次调用：

https://jsfiddle.net/juk41yLs/1/

$('img').hover(
  function() {
    $(this).parent('li').css('text-decoration', 'underline');
  },
  function() {
    $(this).parent('li').css('text-decoration', 'none');
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    Hover over this > 
    <img src="http://placehold.it/350x150">
  </li>
</ul>

【讨论】：

【解决方案3】：

我假设您想在鼠标悬停在 img 上时更改包含 img 的 li。那么你应该这样做：

$('img').on('mouseover', function(event){

    $(this).parent().css('text-decoration', 'underline');
});

【讨论】：

【解决方案4】：

   $('img').on('mouseover', function(event){
     // I would like an Id of a text instead of the 'li'
      var imgId = event.target.id;
      
      $('#' + imgId).css('text-decoration', 'underline');
    });

【讨论】：