我正在尝试使用 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();
});
fiddle :https://jsfiddle.net/1pbvafoy/
最佳答案
$(".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>
- 在查找
.btn
之前先找到 anchor ,因为该 anchor 不是.btn
的同级
关于jquery - 使用 jquery 将图像作为单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37981733/