循环功能要求

Question

嗨我正在使用slideToggle功能点击图像。 假设我的页面中有四个图像，如果我点击特定图像，它必须显示与图像相关的特定内容。目前我通过使用下面提到的脚本来获得该脚本，这是我为每个图像分别声明的。但我需要在我的页面中包含大约100个具有相同功能的图像，我无法重复100次该功能，这不是一个好习惯。所以任何人都可以帮助我，我怎样才能得到这个使用一个单一的循环，而无需重复该功

<script type="text/javascript"> 
     $(document).ready(function() { 
      $(".img").click(
    function() { 
     if ($(this).hasClass('on')) { 
      $(this).removeClass('on').addClass('off'); 
     } else if ($(this).hasClass('off')) { 
      $(this).removeClass('off').addClass('on'); 
     } 
     $(function() { 
      $(".hide-con").slideToggle("800"); 
     }); 

    }); 

      $(".img1").click(
    function() { 
     if ($(this).hasClass('on')) { 
      $(this).removeClass('on').addClass('off'); 
     } else if ($(this).hasClass('off')) { 
      $(this).removeClass('off').addClass('on'); 
     } 
     $(function() { 
      $(".hide-con1").slideToggle("800"); 
     }); 

    }); 

      $(".img2").click(
    function() { 
     if ($(this).hasClass('on')) { 
      $(this).removeClass('on').addClass('off'); 
     } else if ($(this).hasClass('off')) { 
      $(this).removeClass('off').addClass('on'); 
     } 
     $(function() { 
      $(".hide-con2").slideToggle("800"); 
     }); 

    }); 

      $(".img3").click(
    function() { 
     if ($(this).hasClass('on')) { 
      $(this).removeClass('on').addClass('off'); 
     } else if ($(this).hasClass('off')) { 
      $(this).removeClass('off').addClass('on'); 
     } 
     $(function() { 
      $(".hide-con3").slideToggle("800"); 
     }); 

    }); 

      $(".img4").click(
    function() { 
     if ($(this).hasClass('on')) { 
      $(this).removeClass('on').addClass('off'); 
     } else if ($(this).hasClass('off')) { 
      $(this).removeClass('off').addClass('on'); 
     } 
     $(function() { 
      $(".hide-con4").slideToggle("800"); 
     }); 

    }); 
     }); 
</script> 

HTML

<div class="img on"></div> 
<div class="hide-con"> 
    <h1>Background</h1> 
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p> 
</div> 

<div class="img1 on"></div> 
<div class="hide-con1"> 
    <h1>Background</h1> 
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p> 
</div> 

<div class="img2 on"></div> 
<div class="hide-con2"> 
    <h1>Background</h1> 
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p> 
</div> 

<div class="img3 on"></div> 
<div class="hide-con3"> 
    <h1>Background</h1> 
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p> 
</div> 

<div class="img4 on"></div> 
<div class="hide-con4"> 
    <h1>Background</h1> 
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p> 
</div> 

Answer 1

你应该只定义一个类img和使用您今天的类作为ID：

<img class=img id=img3 src=...> 

$(".img").click(function() { 
    if ($(this).hasClass('on')) { 
     $(this).removeClass('on').addClass('off'); 
    } else if ($(this).hasClass('off')) { 
     $(this).removeClass('off').addClass('on'); 
    } 
    $(".hide-con"+this.id.slice(3)).slideToggle("800"); // extracts the number from the id 
}); 

注意，我去掉了无用$.ready包装。

您最好还使用id=hide-con3而不是class=hide-con3并使用$("#hide-con"+this.id.slice(3))来选择它。

Answer 2

尝试用属性选择和^操作

$(document).ready(function() { 
$("img[class^='img']").click(function(){ 
    if ($(this).hasClass('on')) { 
     $(this).removeClass('on').addClass('off'); 
    } else if ($(this).hasClass('off')) { 
     $(this).removeClass('off').addClass('on'); 
    } 

    //you don't have to wrap this in ready function again 
    $(".hide-con").slideToggle("800"); 
    }); 
}); 

此选中所有的img带班begining与img

Answer 3

这是你将如何与for循环做到这一点。

for (var i = 0; i < 100; i++) { 
    var n = i == 0 ? '' : i; 
    $(".img" + n).click(function() { 
     if ($(this).hasClass('on')) { 
      $(this).removeClass('on').addClass('off'); 
     } else if ($(this).hasClass('off')) { 
      $(this).removeClass('off').addClass('on'); 
     } 
     (function (n) { 
      $(function() { 
       $(".hide-con" + n).slideToggle("800"); 
      }); 
     })(n); 
    }); 
} 

我建议不采用这种方法，而是根据每个人的建议采用适当的基于类的解决方案。基于类的解决方案唯一的挑战是如何处理.hide-con，如何处理它将取决于它相对于关联的.img的位置。

你可能想知道本条什么：

(function (n) { 
    $(function() { 
     $(".hide-con" + n).slideToggle("800"); 
    }); 
})(n); 

没有这种包装功能部件每.img点击将调用slideToggle()上.hide-con100因为n值将被保留。为了解决这个问题，我们调用一个匿名函数并给它赋值n，在函数内部现在它是它自己的变量，所以增加外部变量不会影响它。

Answer 4

更换

$(function() { 
     $(".hide-con3").slideToggle("800"); 
}); 

与

$(this).slideToggle("800"); 

这将确保只有被选中的情况下切换，而不是所有的人，并使用同一个类上的所有图像。