2

複数の画像を表示しようとしています。クリックすると、別のテキストが表示されます。

画像1に関連付けられたテキストをデフォルトとして表示し、他の画像/テキストにaを与え、ユーザーがステートメントdisplay: none;を使用して画像をクリックしたときに変更することで、これを試しました。switchしかし、私は何かが欠けているようです。私は何が欠けていますか？

関連する JavaScript:

    $(document).ready(function(){  
$("#list1 > li").click(function(e){  
    switch(e.target.id){  
        case "case1":  
            //change status & style menu  
            $("#nav1").addClass("active");  
            $("#nav2").removeClass("active");  
            $("#nav3").removeClass("active");  
            $("#nav4").removeClass("active");  
            //display selected division, hide others  
            $("div.test1").fadeIn();  
            $("div.test2").css("display", "none");  
            $("div.test3").css("display", "none");  
            $("div.test4").css("display", "none"); 
        break;  
        case "case2":  
            //change status & style menu  
            $("#nav1").removeClass("active");  
            $("#nav2").addClass("active");  
            $("#nav3").removeClass("active"); 
            $("#nav4").removeClass("active");   
            //display selected division, hide others  
            $("div.test2").fadeIn();  
            $("div.test1").css("display", "none");  
            $("div.test3").css("display", "none"); 
            $("div.test4").css("display", "none"); 
        break;  
        case "case3":  
            //change status & style menu  
            $("#nav1").removeClass("active");  
            $("#nav2").removeClass("active");  
            $("#nav3").addClass("active");  
            $("#nav4").removeClass("active");
            //display selected division, hide others  
            $("div.test3").fadeIn();  
            $("div.test1").css("display", "none");  
            $("div.test2").css("display", "none"); 
            $("div.test4").css("display", "none"); 
        break;  
        case "case4":  
            //change status & style menu  
            $("#nav1").removeClass("active");  
            $("#nav2").removeClass("active");  
            $("#nav4").addClass("active");  
            $("#nav3").removeClass("active");
            //display selected division, hide others  
            $("div.test3").fadeIn();  
            $("div.test1").css("display", "none");  
            $("div.test2").css("display", "none");  
            $("div.test4").css("display", "none");
        break;  
    }  
    //alert(e.target.id);  
    return false;  
});  
    });

関連する HTML:

        <div id="slider">
<ul id="list1">
    <li id="nav1" class="active"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
    <li id="nav2"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
    <li id="nav3"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
    <li id="nav4"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
</ul>

    <div class="test1">
    <h2>Test tab</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
        <p>labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
        <p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>
        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in </p>
        <p>culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="test2">
    <h2>Test tab2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
        <p>labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
        <p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>
        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in </p>
        <p>culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="test3">
    <h2>Test tab3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
        <p>labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
        <p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>
        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in </p>
        <p>culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>
4

3 に答える 3

1

jsBin デモ

必要なのはこれだけです:

$('#list1 li').eq( 0 ).addClass('active');
$('.test:gt(0)').hide();

$('#list1 li').click(function( e ){
  e.preventDefault();
  var myIndex = $(this).index();
  
  $(this).addClass('active').siblings('li').removeClass('active');
  $('.test').hide().eq( myIndex ).fadeTo( 400,1 );  
});

この HTML 構造の例を持つ:

<div id="slider">
    <ul id="list1">
        <li></li>
        <li></li>    
        <li></li> <!-- if you click this one "myIndex" will be '2' -->
        <li></li>
    </ul>

    <div class="test"></div>   <!-- .eq(0) --> 
    <div class="test"></div>   <!-- .eq(1) -->
    <div class="test"></div>   <!-- this is $('.test').eq(myIndex) -->  
    <div class="test"></div>   <!-- .eq(3) -->
</div>
于 2012-11-20T12:01:14.717 に答える
1

ids のsliはnav1、nav2などです。switch の場合はcase1、case2、 などを使用しています。

それを変更すると、物事が機能し始めるはずです。

そうは言っても、あなたのjQueryはひどく肥大化しています。これは write less, do more JS ライブラリと呼ばれていますが、それには理由があります。:-)

更新：（このjsBinでしばらくの間これを行ってきました。@roxonが1分前にまったく同じ答えを得たことは知っていますが、費やした時間が無駄にならないようにここに投稿します）

$("#list1 > li").click(function(){  
  var index = $(this).index();
  $('.active').removeClass('active');
  $(this).addClass('active');

  $('.test').hide().eq(index).fadeIn();
  return false;
});

これは、html 構造に小さな変更を加えるだけで機能します。test1、などの div クラスを持つ代わりに、共通のクラスをtest2持つすべての s を持つだけですdivtest

于 2012-11-20T11:44:12.477 に答える
0 
$(document).ready(function(){  
$("#list1 > li").click(function(e){  
switch(e.target.id){  
    case "nav1":  
        //change status &amp;amp;amp; style menu  
        $("#nav1").addClass("active");  
        $("#nav2").removeClass("active");  
        $("#nav3").removeClass("active");  
        $("#nav4").removeClass("active");  
        //display selected division, hide others  
        $("div.test1").fadeIn();  
        $("div.test2").css("display", "none");  
        $("div.test3").css("display", "none");  
        $("div.test4").css("display", "none"); 
    break;  
    case "nav2":  
        //change status &amp;amp;amp; style menu  
        $("#nav1").removeClass("active");  
        $("#nav2").addClass("active");  
        $("#nav3").removeClass("active"); 
        $("#nav4").removeClass("active");   
        //display selected division, hide others  
        $("div.test2").fadeIn();  
        $("div.test1").css("display", "none");  
        $("div.test3").css("display", "none"); 
        $("div.test4").css("display", "none"); 
    break;  
    case "nav3":  
        //change status &amp;amp;amp; style menu  
        $("#nav1").removeClass("active");  
        $("#nav2").removeClass("active");  
        $("#nav3").addClass("active");  
        $("#nav4").removeClass("active");
        //display selected division, hide others  
        $("div.test3").fadeIn();  
        $("div.test1").css("display", "none");  
        $("div.test2").css("display", "none"); 
        $("div.test4").css("display", "none"); 
    break;  
    case "nav4":  
        //change status &amp;amp;amp; style menu  
        $("#nav1").removeClass("active");  
        $("#nav2").removeClass("active");  
        $("#nav4").addClass("active");  
        $("#nav3").removeClass("active");
        //display selected division, hide others  
        $("div.test3").fadeIn();  
        $("div.test1").css("display", "none");  
        $("div.test2").css("display", "none");  
        $("div.test4").css("display", "none");
    break;  
}  
//alert(e.target.id);  
return false;  
});  
    });
于 2012-11-20T11:52:15.370 に答える