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 li 中，带有“one”的 li 应该可见。

<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();
});