jquery show hide不工作與jquery水車插件

Question

我使用7圖像jquery水車。

<div class="carousel-images"> 

      <img src="img/large_girl.jpg" title="Danielle M., 23Yrs., Model." id="oneimg" /> 
      <img src="img/large_girl.jpg" title="Selena Gomez., 20Yrs., Student." id="twoimg" /> 
      <img src="img/large_girl.jpg" title="Alicia, 19Yrs., Model." id="threeimg" /> 
      <img src="img/large_girl.jpg" title="Alicia, 19Yrs., Model." id="fourimg" /> 
      <img src="img/large_girl.jpg" title="Alicia, 19Yrs., Model." id="fiveimg" /> 
      <img src="img/large_girl.jpg" title="Alicia, 19Yrs., Model." id="siximg" /> 
      <img src="img/large_girl.jpg" title="Alicia, 19Yrs., Model." id="sevenimg" /> 
     </div> 

我想顯示特定圖像的文本中，即點擊圖片ID「oneimg」單擊時，然後在下面UL李與李「一」應該是可見的。

<ul>   


<li id="one"> 
<img src="img/left_quote.png">You Wish You Could Dance With Me. <span>I AM GAME</span> <img src="img/right_quote.png"> 
</li> 

<li id="two"> 
<img src="img/left_quote.png">You Wish You Could Go To Beach With Me. <span>I AM GAME</span> <img src="img/right_quote.png"> 
</li> 

<li id="three"> 
<img src="img/left_quote.png">You Wish You Were Younger. <span>GIVE ME A CHANCE</span> <img src="img/right_quote.png"> 
</li> 
<li id="four"><img src="img/left_quote.png">You Wish You Could Learn Portuguese. <span>I AM GAME</span> <img src="img/right_quote.png"> 
</li> 
<li id="five"> 
<img src="img/left_quote.png">You Wish You Could Get Closer. <span>I AM GAME</span> <img src="img/right_quote.png"> 
</li> 
<li id="six"> 
<img src="img/left_quote.png">You Want Me At Business Luncheon.  <span>I AM GAME</span> <img src="img/right_quote.png"> 
</li> 
<li id="seven"><img src="img/left_quote.png">You Wish To Meet My Friends. <span>I AM GAME</span> <img src="img/right_quote.png"> 
</li> 
    </ul> 

我使用這個jQuery中

$('.sevensins ul li').hide(); 

        $('#oneimg').click(function(e) { 
         $('.sevensins ul li#one').show(); 
         !$('.sevensins ul li#one').hide(); 
         });      

        $('#twoimg').click(function(e) { 
         $('.sevensins ul li#two').show(); 
         !$('.sevensins ul li#two').hide(); 
         }); 

         $('#threeimg').click(function(e) { 
         $('.sevensins ul li#three').show(); 
         !$('.sevensins ul li#three').hide(); 
         }); 

         $('#fourimg').click(function(e) { 
         $('.sevensins ul li#four').show(); 
         !$('.sevensins ul li#four').hide(); 
         }); 

         $('#fiveimg').click(function(e) { 
         $('.sevensins ul li#five').show(); 
         !$('.sevensins ul li#five').hide(); 
         }); 

         $('#siximg').click(function(e) { 
         $('.sevensins ul li#six').show(); 
         !$('.sevensins ul li#six').hide(); 
         }); 

         $('#sevenimg').click(function(e) { 
         $('.sevensins ul li#seven').show(); 
         !$('.sevensins ul li#seven').hide(); 
         }); 

Answer 1

更改所有的JavaScript以下內容。

$('.carousel-images img').click(function() { 
    var id = this.id; 
    id = id.substr(0, id.indexOf('img')); 
    $('ul li:not(#' + id + ')').hide(); 
    $('#' + id).show(); 
});