javascript - jquery 输入未检查图像路径更改

Question

我不知道它是如何工作的，所以我希望你能帮助我。如果未选中输入字段，我想更改图片的图像路径。如果选中，它会将路径更改为彩色图片，这对我来说很好，但如果我选择另一张图片，之前的图片应该变回黑白图片。

提前致谢!

这是 html:

$('input[name=an_paymentOptionsControl]').on('change', function() {
  $(this).siblings('img').attr('src', 'pics/payment-large/' + this.getAttribute('value') + '.png');
  console.log(this.getAttribute('value'));
});

$('input[name=an_paymentOptionsControl]').not(':checked', function() {
  $('img').attr('src', 'pics/payment-large/sw' + this.getAttribute('value') + '.png');
  console.log('nix');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="anm-payment-layout-methods">
  <label>
          <input class="anm-pay-method" type="radio" value="acc" name="an_paymentOptionsControl" />
          <img class="paymentLabel" src="pics/payment-large/swacc.png">
        </label>
  <label>
          <input class="anm-pay-method" type="radio" value="paypal" name="an_paymentOptionsControl" />
          <img src="pics/payment-large/swpaypal.png">
        </label>
  <label>
            <input class="anm-pay-method" type="radio" value="sue" name="an_paymentOptionsControl" />
            <img src="pics/payment-large/swsue.png">
        </label>
  <label>
            <input class="anm-pay-method" type="radio" value="giropay" name="an_paymentOptionsControl" />
            <img src="pics/payment-large/swgiropay.png">
        </label>
  <label>
            <input class="anm-pay-method" type="radio" value="prepay" name="an_paymentOptionsControl" />
            <img src="pics/payment-large/swprepay.png">
        </label>
</div>

Answer 1

在 change 事件处理程序中更新图像的路径。

$('input[name=an_paymentOptionsControl]').on('change', function () {
    $(this).siblings('img').attr('src', 'pics/payment-large/' + this.value + '.png');

    //Reset images
    $('input[name=an_paymentOptionsControl]:not(:checked)').each(function () {
        $(this).siblings('img').attr('src', 'pics/payment-large/sw' + this.value + '.png');
    });
});