jquery - 找到一个img并改变它的可见性

Question

当在表行中选择 true 或 false 单选按钮时，我想根据单击的单选按钮显示特定图像。我在这里做了一些警报，发现我什至没有识别该图像，更不用说更改它的可见性了。

这是 HTML:

<tr>
<td>This is a bit answer</td>
<td>
      <label>
          <input checked="checked" data-StudentScore="ScoreBit" id="StudentScores_0__ScoreBit" type="radio" value="" />
          Not answered
      </label>
      <label>
          <input data-StudentScore="ScoreBit" id="StudentScores_0__ScoreBit" type="radio" value="False" />
          False
      </label>
      <label>
          <input data-StudentScore="ScoreBit" id="StudentScores_0__ScoreBit" type="radio" value="True" />
          True
      </label>
</td>
<td class="met-image">
    <img class="Img-Met" style="visibility:visible" alt="Met" src="/Images/tick_circle.png" />
</td>
<td class ="not-met-image">
    <img class="Img-NotMet" style="visibility:hidden" alt="Not Met" src="/Images/minus_red_button.png" />
</td>

这是我的脚本中不起作用的部分(我已经删除了“如果单击了这个或那个按钮”，因为这不是我的问题的一部分):

$(document).ready(function () {
  $("input[type=radio]").click(function () {
    $(this).closest('tr').find("td.met-image").find('img[alt="Met"]').attr('style', "visibility':'hidden'");
    $(this).closest('tr').find("td.not-met-image").find('img[alt="Not Met"]').attr('style', "visibility':'visible'");
  });
});

有人可以帮我找到与单击的单选按钮位于同一行的图像，并更改它们的可见性吗？仅供引用:这是在 MVC4 View 中。

Answer 1

您必须使用.css()而不是.attr()。实际上 .css() 是为了设置 css 样式属性而设计的。请阅读here了解更多信息。

尝试，

$(document).ready(function () {
$("input[type=radio]").click(function () {
    $(this).closest('tr').find("td.met-image").find('img[alt="Met"]').css('visibility','hidden');
    $(this).closest('tr').find("td.not-met-image").find('img[alt="Not Met"]').css('visibility','visible');
 });
});

DEMO