Question

当在表格行中选择了真或假单选按钮时，我想根据点击的广播显示特定图像。我在这里做了一些提醒，发现我甚至没有识别图像，更不用说改变它的可见性了。

这是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视图中。

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

Answer 2

您可以直接使用css()。

  $(this).closest('tr').find("td.met-image").find('img[alt="Met"]').css('visibility', 'hidden');

                                                                    ^^ change here

Answer 3

尝试：

$(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");

OR

$(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");

注：

您尚未将name属性添加到单选按钮。

HTML：

<input checked="checked" data-StudentScore="ScoreBit" id="StudentScores_0__ScoreBit" name="answer" type="radio" value="" />
<input data-StudentScore="ScoreBit" id="StudentScores_0__ScoreBit" name="answer" type="radio" value="False" />
<input data-StudentScore="ScoreBit" id="StudentScores_0__ScoreBit" name="answer" type="radio" value="True" />

DEMO here.

找到一个img并改变其可见性

3 个答案:

DEMO