Question

所以我有5个单选按钮和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');

我已添加图片以说明

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

听起来您想将skrijgo类添加到您不想显示的所有其他图像中。

我会选择更通用的解决方案。例如

$('input[name="kartka"][id]').on('change', function() {
  let checkId = `${this.id}slika`
  $('#kartata img').each((i, elt) => {
    elt.classList.toggle('skrijgo', elt.id !== checkId)
  })
})

也就是说，只要名为“kartka”（带有id属性）的输入发生更改，就会迭代<img>内的所有#kartata元素，如果他们的id属性与单选按钮的id + 'slika'匹配，然后删除该类。如果没有，则添加该类。

当取消选中单选按钮时，img元素不会添加类

2 个答案: