带有jquery

Question

我试图用jquery制作带有单选按钮的图像。我遇到的问题是表现得像复选框而不是单选按钮。我想要做的是让用户只进行一次检查！我尝试使用siblings()函数取消选中其他元素，但它不起作用！

HTML

<a href="#">
    <div class="btn">
        <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
        <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
    </div>
</a>

<a href="#">
    <div class="btn">
        <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
        <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
    </div>
</a>

<a href="#">
    <div class="btn">
        <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
        <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
    </div>
</a>

<a href="#">
    <div class="btn">
        <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
        <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
    </div>
</a>

JQUERY

$(".btn").click(function() {
    $(this).find('img').toggle();
    $(this).siblings('.btn').find('.checked').hide();
    $(this).siblings('.btn').find('.normal').show();
});

小提琴：https://jsfiddle.net/1pbvafoy/

Answer 1

$(".btn").click(function() {
  $(this).find('img').toggle();
  $(this).parent('a').siblings().find('.btn .checked').hide();
  $(this).parent('a').siblings().find('.btn .normal').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">
  <div class="btn">
    <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
    <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
  </div>
</a>

<a href="#">
  <div class="btn">
    <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
    <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
  </div>
</a>

<a href="#">
  <div class="btn">
    <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
    <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
  </div>
</a>

<a href="#">
  <div class="btn">
    <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
    <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
  </div>
</a>

1. 在寻找.btn之前先找到锚点，因为锚点不是.btn
的兄弟

Answer 2

这是修复https://jsfiddle.net/jvtppxyf/

你需要使用parent（）

    $(".btn").click(function() {
        $(this).find('img').toggle();
        $(this).parent().siblings().find('.checked').hide();
        $(this).parent().siblings().find('.normal').show();
    });