twitter-bootstrap 使用 Bootstrap JS 单选按钮单击时更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18023368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change image on click with Bootstrap JS radio button
提问by user2646903
I'm using the latest version of Bootstrap and I want to use the javascript radio button to change between two pictures.
我正在使用最新版本的 Bootstrap，我想使用 javascript 单选按钮在两张图片之间切换。
I got two images, let say Image1 and Image2. Underneath I want to use a radio button with two options; "Show Image1" and "Show Image2". Image1 should be showed as default. When I push "Show Image2" Image1 should disappear and be replaced with Image2, if I push "Show Image1" after that, Image1 should be showed again.
我有两个图像，比如说 Image1 和 Image2。下面我想使用一个带有两个选项的单选按钮；“显示图像 1”和“显示图像 2”。Image1 应显示为默认值。当我按下“Show Image2”时，Image1 应该消失并被 Image2 替换，如果我在此之后按下“Show Image1”，则应该再次显示 Image1。
The appearance should be something like this: http://i.solidfiles.net/246a3403cb.png
外观应该是这样的：http: //i.solidfiles.net/246a3403cb.png
Is it possible to do this with html/css/js? I would really appreciate if someone could make an JS Fiddle and explain how to do this the best way. Using a css/html hack doesn't feel like a good way doing this...
是否可以使用 html/css/js 来做到这一点？如果有人可以制作 JS Fiddle 并解释如何以最佳方式做到这一点，我将不胜感激。使用 css/html hack 感觉不是这样做的好方法......
Twitter Bootstrap Radio Button(Scroll down to "Radio")
Twitter Bootstrap Radio Button（向下滚动到“Radio”）
回答by user20232359723568423357842364
Here is the jsfiddle
这是jsfiddle
Markup the images, and hide the second. Add the radio btn-groupfrom your link
标记图像，并隐藏第二个。从您的链接添加收音机btn-group
<div>
<img src="http://www.google.com/images/icons/product/chrome-32.png" title="image 1" alt="image 1" id="image1" class="image-toggle" />
<img src="http://www.google.com/images/icons/product/search-32.png" title="image 2" alt="image 2" id="image2" class="image-toggle" style="display:none;" />
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary image-toggler" data-image-id="#image1">
<input type="radio" name="options" id="option1"> Show Image 1
</label>
<label class="btn btn-primary image-toggler" data-image-id="#image2">
<input type="radio" name="options" id="option2"> Show Image 2
</label>
</div>
After the inclusion of your js, add this
在包含你的js之后，添加这个
<script>
$('.image-toggler').click(function(){
$('.image-toggle').hide();
$($(this).attr('data-image-id')).show();
})
</script>
回答by Pricey
Since you are using Bootstrap, then I would suggest you try doing this with the Bootstrap Carousel.
由于您使用的是 Bootstrap，因此我建议您尝试使用 Bootstrap Carousel 执行此操作。
see here: http://getbootstrap.com/javascript/#carousel
见这里：http: //getbootstrap.com/javascript/#carousel
You can see
你可以看到
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
the data-slideattribute can be used on anchors and they link to a data-target, see the Bootstrap example. This may work some how on the Bootstrap radio buttons, they are just html radio buttons by the way.. however since it needs to link to the image my bet is you will have to call it yourself.
该data-slide属性可用于锚点，它们链接到 a data-target，请参阅 Bootstrap 示例。这可能会在 Bootstrap 单选按钮上起作用，顺便说一下，它们只是 html 单选按钮..但是因为它需要链接到图像，我敢打赌你必须自己调用它。
I suggest you use jQuery and the Bootstrap Carousel methods
我建议你使用 jQuery 和 Bootstrap Carousel 方法
.carousel('prev')
Cycles to the previous item.
.carousel('next')
Cycles to the next item.
manually on the click on the radio buttons.. I will leave you to try that out.
手动点击单选按钮.. 我会让你尝试一下。
If your looking for another approach then there are plenty of tutorials around for building an image switcher, but in your case you want it to work manually.
如果您正在寻找另一种方法，那么有很多教程可以用于构建图像切换器，但在您的情况下，您希望它手动工作。
Try some of these websites to get you started: http://designm.ag/tutorials/21-best-websites-for-teaching-yourself-web-development/
尝试其中一些网站以帮助您入门：http: //designm.ag/tutorials/21-best-websites-for-teaching-yourself-web-development/
