循環功能要求

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"); 

這將確保只有被選中的情況下切換，而不是所有的人，並使用同一個類上的所有圖像。