当点击不同的图像时候显示对应的层,如何做for循环不用写太多的if语句

各位大大,当点击不同的图像时候显示对应的层,如何做for循环不用写太多的if语句,谢谢!

sample:
  <ul>
                <li><img src="images/1.gif" width="60" height="60" border="0" style="cursor:pointer" id="1"/></li>
                <li><img src="images/2.gif" width="60" height="60" border="0" style="cursor:pointer" id="2"/></li>
                <li><img src="images/3.gif" width="60" height="60" border="0" style="cursor:pointer" id="3"/></li>
                <li><img src="images/4.gif" width="60" height="60" border="0" style="cursor:pointer" id="4"/></li>
                <li><img src="images/5.gif" width="60" height="60" border="0" style="cursor:pointer"  id="5"/></li>
                <li><img src="images/6.gif" width="60" height="60" border="0" style="cursor:pointer"/></li>
                <li><img src="images/7.gif" width="60" height="60" border="0" style="cursor:pointer"/></li>
                <li><img src="images/8.gif" width="60" height="60" border="0" style="cursor:pointer"/></li>
                <li><img src="images/9.gif" width="60" height="60" border="0" style="cursor:pointer"/></li>
  </ul>
<script language="javascript">
$(document).ready(function(){
    $("img").click(function(){
    if (this.id == "1"){
        $(".STYLE2").hide()    
        $("#28").show();
    }
    else if (this.id=="2"){
        $(".STYLE2").hide()    
        $("#29").show();
    }
    else if (this.id=="3"){
        $(".STYLE2").hide()    
        $("#30").show();
    }
    else if (this.id=="4"){
        $(".STYLE2").hide()    
        $("#31").show();
    }
    
    })    

为什么不把层的ID有序话类?比如说DIV+当前ID组成一个新的层.这样就好实现了.
$('img').each(function(i){
   $(this).eq(i).click(function(){
        $('.style2').hide();
        $('div'+i).show()
   })
}
)
以上代码是我一时想出来的.不知道对不对.希望对你有帮助

复制代码 <script> $(function(){ $(".btn li").each(function(i){     $(".btn li").eq(i).click(function(){          $('.contentshow li').eq(i).show().siblings().hide();         $(this).addClass("on").siblings().removeClass("on");         })     }) }); </script> <style> .btn { width:100%;} .btn li{ display:inline; width:100px; height:30px; background:red; float:left;} .btn li.on { background:green} .contentshow li{ margin:10px; height:30px; background:#369; display:none;} </style> <div class="btn"><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul></div> <div class="contentshow"><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul></div>