Question

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

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

这个jQuery脚本成功地使用该类在单击任何cbox时运行，但是如何让它显示/隐藏相关的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链接：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事件而非点击来处理点击而不是任何更改。其次，如果我们不需要更改JS代码，那么我们不应该只运行下一个项目，而是按类别找到兄弟姐妹。最后，当我们找到这个元素时，我们应该在其中搜索图像以显示它或隐藏基于复选框选中的状态，这里我们甚至可以改进我的代码

这是jsfillde

的更新版本

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

Answer 3

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

我们使用分隔符（＆＃34; _＆＃34;），以便轻松地从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;}

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

3 个答案: