如何根据单击的复选框显示/隐藏特定图像（单击 cbox3 应打开 tinypic3）

Question

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

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

当点击任何 cbox 时，此 jQuery 脚本成功使用该类运行，但我如何让它显示/隐藏关联的 TINYPIC 而不是显示/隐藏 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

$(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 事件而不是点击来处理不仅点击而且任何更改。 其次，我们不应该只操作下一项，而是按类查找兄弟，如果 html 发生更改，我们不需要更改 JS 代码。 最后，当我们找到这个元素时，我们应该在其中搜索图像以根据复选框选中状态显示或隐藏，在这里我们甚至可以改进我的代码

这是jsfillde的更新版本

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

Answer 2

JSfiddle 链接：http://jsfiddle.net/evjkvur1/

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

Answer 3

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

我们使用分隔符（“_”）可以轻松地将数字标识符与 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;}