如何 show/hide 基于单击哪个复选框的特定图像（单击 cbox3 应打开 tinypic3）

Question

我有 10 个不同的复选框，每个都有其唯一的 ID - 按顺序排列，例如：cbox1、cbox2 等。每个复选框都有一个关联的 "tinybox" div 其中包含一个图像，每个图像都有一个按顺序排列的 ID，如 tinypic1、tinypic2 等。我正在尝试编写一个 jQuery 脚本，以便当用户单击任何复选框，然后它将 .show() 或 .hide() 关联的 tinypic。

例如，假设用户点击了 ID="cbox3" 的第三个复选框，脚本应该识别这是 cbox TREE，因此显示或隐藏 "tinypic3"。每个复选框都有一个唯一的 ID，但具有相同的 Class（称为 cboxes）。

此 jQuery 脚本在单击任何 cbox 时成功使用 class 到运行，但是我如何将它获取到 show/hide 关联的 TINYPIC 而不是 show/hiding cbox 本身？

<script type="text/javascript"> 
   $(document).ready(function() {
     $('.cboxes').click(function() {
 if ($(this).prop('checked')) {
           $(this).next().show();  // This should show the associated tinypic with the same number as the cbox that was clicked.
            }   
        else {
            $(this).next().hide();    // This should hide the associated tinypic with the same number as the cbox that was clicked.
        }
     });    
   });       
</script>

我试过用 $(this).next().show(); 代替 $("[id^='tinypic']").show(); 或 $('input:checkbox[id^="tinypic_"]') 但它不起作用。我显然不明白其中的逻辑。

任何帮助都是巨大的！非常感谢:)

这是 cbox2 的示例复选框：

<li>
   <input id="cbox2" type="checkbox" name="cbox2" class="cboxes" />
   <label for="cbox2">Show</label>  
   <div class="tinybox">
      <img src="http://www.example.com/img/temp.jpg" alt="tinypic2" id="tinypic2" style="display:none;">   
   </div>
</li>

Answer 1

JSfiddle link : http://jsfiddle.net/evjkvur1/

 $(this).next() //refers to the label and not the image,
 Try giving
 $(this).closest("li").find("img");

Answer 2

这是一个工作代码jsfiddle

$(document).ready(function() {
   $('.cboxes').change(function() {
       var image = $(this).siblings(".tinybox").find("img");
       if ($(this).prop('checked')) {
           image.show();  // This should show the associated tinypic with the same number as the cbox that was clicked.
       }   
       else {
          image.hide();    // This should hide the associated tinypic with the same number as the cbox that was clicked.
       }
   });    
 });

所以首先我们应该使用 change 事件而不是点击来处理点击和任何变化。其次我们不要只操作next item而是通过class查找sibling 如果html变化我们不需要改变JS代码。最后，当我们找到这个元素时，我们应该在其中搜索图像以根据复选框选中状态显示或隐藏它，在这里我们甚至可以改进我的代码

这里是 jsfillde

的更新版本

$(document).ready(function() {
   $('.cboxes').change(function() {
       var image = $(this).siblings(".tinybox").find("img");
       image.toggle($(this).prop('checked'));
   });    
 });

Answer 3

此示例将允许您将 tinybox div 放置在页面上您想要的任何位置，并根据需要 show/hide 它们。

我们使用分隔符（“_”）以便于将数字标识符与 ID 的其余部分分开。或者，如果您不能重构您的 ID 标签，您可以使用 slice() 方法，因此：

$('input[type=checkbox]').click(function(){
    var i = this.id.slice(-2).replace( /\D+/g, '');
    alert(i);
});

我没有使用 .show() / .hide()，您可能很了解，我使用 .animate() 方法来更改不透明度，原因有二：(1) 演示如何它有效，并且 (2) 只是为了将 DIV 保持在适当的位置（因为元素没有从流中移除，它只是呈现为不可见）

jsFiddle Demo

HTML:

CB 1: <input type="checkbox" id="cb_1" /><br>
CB 2: <input type="checkbox" id="cb_2" /><br>
<div id="tinypic_1"><img src="http://placekitten.com/50/51" /></div>
<div id="tinypic_2"><img src="http://placekitten.com/48/50" /></div>

javascript/jQuery:

$('input[type=checkbox]').click(function(){
    var i = this.id.split('_')[1]; //split into array at the _ & choose 2nd element
    var vis = ( $(this).prop('checked') ) ? 1 : 0; //1=checked, 0=not
    $('#tinypic_'+i+' img').animate({
        'opacity' : vis
    },800);
});

CSS:

div{display:inline-block;margin:10px;}
img{opacity:0;}

如何 show/hide 基于单击哪个复选框的特定图像（单击 cbox3 应打开 tinypic3）

How to show/hide a specific image based on which checkbox is clicked (clicking cbox3 should open tinypic3)

html

javascript

checkbox

jquery