Question

当我点击另一个div时，我试图通过淡入淡出div来交换div。唯一的问题是：首先回调函数不会被调用，所以我完全把它拿出来，div现在表现得很好笑。这意味着当我单击其中一个div时，应该fadeIn的相应div不会和应该有fadedOut的div没有。

HTML：

<ul id="tour"> 
   <li id="pitch_link" class="selected">
      <h1>Pitch</h1>
      <p>Pitch a ball.</p>
   </li>
   <li id="publish_link">   
      <h1>Publish</h1>
      <p>Publish the spin.</p>
   </li>

<div id="pitch">  
  <ul>
    <li><h2>pitch Stuff</h2></li>
    <li><h2>Graphics</h2></li>
  </ul>
</div>

<div id="publish">  
  <ul>
    <li><h2>publish Stuff</h2></li>
    <li><h2>Graphics</h2></li>
  </ul>
</div>

jQuery w / out回调：

$("#tour li").click( function(event) {

    if( !$(this).is( ".selected" ) ) {

        // find the link that was previously selected and fade it out
        var prevSelectedLink = $(".selected").attr( 'id' );
        prevSelectedID = "#" + prevSelectedLink.substr( 0, prevSelectedLink.length-5 );

        // fade the previously selected div out
        $(prevSelectedID).fadeOut( "fast" );

        // Deselect the previously selected link (remove selected class)
        $(prevSelectedLink).removeClass( "selected" );  

        // Select the new Link          
        $(this).addClass("selected");

        // Fade the new div content in
        var linkID = $(this).attr( 'id' );  // linkID = pitch_link
        contentID = "#" + linkID.substr( 0, linkID.length-5 );  // contentID = #pitch

        $(contentID).fadeIn( "slow" );  

    }
});

jQuery w / callback： if（！$（this）.is（“。select”））{

// find the link that was previously selected and fade it out
var prevSelectedLink = $(".selected").attr( 'id' );
        prevSelectedID = "#" + prevSelectedLink.substr( 0, prevSelectedLink.length-5 );

        // fade the previously selected div out
        $(prevSelectedID).fadeOut( "fast" , function() {

            // Deselect the previously selected link (remove selected class)
            $(prevSelectedLink).removeClass( "selected" );  

            // Select the new Link          
            $(this).addClass("selected");

            // Fade the new div content in
            var linkID = $(this).attr( 'id' );  // linkID = pitch_link
            contentID = "#" + linkID.substr( 0, linkID.length-5 );  // contentID = #pitch

            $(contentID).fadeIn( "slow" );
        }); 

    }
});

Answer 1

没有CSS，我无法确定问题是什么，但代码可以像这样清理：

$('#tour li').click(function(){

   if( !$(this).hasClass('selected') ){

       //Get the ID of the DIV you want to show
       var div_id = $(this).attr( 'id' ).replace('_link','');
       $('#tour li').removeClass('selected');
       $(this).addClass('selected');

       $('div').fadeOut("fast", function(){
            $('#'+div_id).fadeIn("fast");
       });

   }else{
       return false;
   }

});

我没有对此进行测试，但它的作用是如果未选择链接，则使用链接ID获取div的ID，从所有其他链接中删除“selected”类并添加“selected”类点击了李。然后所有div都消失了，最后所需的div消失了。

你也可以使用.not（）运算符来阻止div的fadeOut（）和'div_id'。

Answer 2

这是我最终得到的代码，非常感谢Sagar。

$("#tour li").click( function(event) {

    // make sure we are not already selected
    if( !$(this).hasClass( "selected" ) ) {

        // find the tab link that was previously selected and the corresponding div content
        var prevTab = '#' + $(".selected").attr( 'id' );    // prevTab = #pitch_link
        prevTabCont = prevTab.replace( '_link', '' );   // prevTabCont = #pitch

        // Deselect the previously selected tab link (remove selected class)
        $(prevTab).removeClass( "selected" );   

        // Find the currently selected tab and its corresponding div content
        var selectedTab = '#' + $(this).attr( 'id' );   // selectedTab = #publish_link
        selectedTabCont = selectedTab.replace( '_link', '' );   // selectedTabCont = #publish

        // Make the tab link selected       
        $(this).addClass("selected"); // this -> #publish_link

        // fade the previously selected div out
        $(prevTabCont).fadeOut( "slow", function() {                        
            $(selectedTabCont).fadeIn( "slow" );
        });
    }

});

没有调用jQuery fadeOut回调函数

2 个答案: