javascript - 未选中单选按钮时，img 元素不会添加类

Question

所以我有 5 个单选按钮和 5 个图像。我希望在单击时每个按钮显示特定图像。但是，当我用其他东西选中单选按钮时，它会添加另一个图像而不是替换它!

这是代码

https://jsfiddle.net/fcd8s9c8/5/

这是我的 JS 代码

$("#ekoloshki").change(function() {
    if (this.checked) {
        $("#ekoloshkislika").removeClass("skrijgo");
    }
    else    {
        $("#ekoloshkislika").addClass("skrijgo");
}
});

Answer 1

您需要使用当前选中的单选按钮的 ID，并将其与单词 slika 连接起来。

$('img').addClass('skrijgo');
$('img#' + $(this).attr('id') + 'slika').removeClass('skrijgo');

我添加了图片来说明

$(document).ready(function() {
  $('[name="karta"]').change(function() {
    $('img').addClass('skrijgo');
    $('img#' + $(this).attr('id') + 'slika').removeClass('skrijgo');
  });
});

#listata {
  display: block;
  margin-right: 25%;
  margin-left: 25%;
  margin-top: 0%;
  background-color: white;
}

.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#checkboxes {
  display: block;
  width: 100%;
  background-color: white;
  border-style: solid;
  border-color: black;
  height: 5%;
}

.skrijgo {
  display: none;
}

#kartata {
  margin-top: 2%;
  position: relative;
  float: center;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="listata">
  <div id="checkboxes" class="unselectable">
    <label><input type="Radio" id="ekoloshki" name="karta">Еколошки фактори</label>
    <p>
    <label><input type="Radio" id="socio" name="karta">Социо-економски фактори</label>
    <p>
    <label><input type="Radio" id="prirodni" name="karta">Природно-географски фактори</label>
    <p>
    <label><input type="Radio" id="infra" name="karta">Инфраструктурни фактори</label>
    <p>
    <label><input type="Radio" id="site" name="karta">Сите фактори</label>
  </div>
</section>

<!-- Kartite -->
<section>
  <div id="kartata">
    <img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" id="ekoloshkislika" class="skrijgo">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhILUOq_dTGoC4-EqYrk25I3G3RuQkz09hgqABMs9AOg2h-dumkA" id="socioslika" class="skrijgo">
    <img src="http://lmsotfy.com/so.png" id="prirodnislika" class="skrijgo">
    <img src="https://cdn-images-1.medium.com/max/785/1*H-25KB7EbSHjv70HXrdl6w.png" id="infraslika" class="skrijgo">
    <img src="http://www.stickpng.com/assets/images/586aaf811fdce414493f5105.png" id="siteslika" class="skrijgo">
  </div>
</section>