Jquery類檢查和更改

昨天我發佈了一個問題，要求我寫一個圖像切換腳本的幫助，謝謝所有幫助我。我已經擴展了腳本，遇到了一個問題，我不能在我的生活中發現問題所在。Jquery類檢查和更改

HTML：

<div id="feature-image"> 
    <h1><span>A random heading</span></h1> 
</div> 

<div id="feature-links"> 
    <a class="a1" href="#">1</a> 
    <a class="a2" href="#">2</a> 
    <a class="a3" href="#">3</a> 
</div>

JS + jQuery的：

$(function(){ 
    $('#feature-links a').click(function() { 

     if ($(this).hasClass('a-active')) { 
      return false; 
     } else { 

    var image = $(this).attr('class'); 

     switchToImg(image, function() { 
      $('#feature-links a .a-active').removeClass('a-active'); 
      $('#feature-links .' + image).addClass('a-active'); 
     }); 
    } 
}); 

function switchToImg(image){ 
    $('#feature-image').fadeOut('300', function(){ 
     $('#feature-image').css('background-image','url(images/main_' + image + '.jpg)'); 
     $('#feature-image').fadeIn('300'); 
    });  
};

在我檢查上<a>標籤click腳本，每個<a>標籤有一個類（A1，A2，A3等等。）。另外，活動的<a>有一類「非活動」。

我試圖檢查a-active設置與此：

if ($(this).hasClass('a-active')) { 
    return false; 
}

切腳本有那麼它不會淡入淡出相同的圖像。然而，儘管我在檢查類a-active並返回錯誤時返回錯誤，但圖像仍然淡入淡出。我確定問題在於我使用的部分是.addClass和.removeClass，但是我對JavaScript和Jquery的知識對於我來說是正確的調試。

請問有人可以批評這個嗎？

在此先感謝。

來源

2011-10-27 David Barker

你錯誤地傳遞了一個匿名函數您switchToImg()功能，不接受一個。

相反，請嘗試以下JS：

$(function() { 
    $('#feature-links a').click(function() { 

     if ($(this).hasClass('a-active')) { 
      return false; 
     } else { 
      var image = $(this).attr('class'); 

      switchToImg(image); 
     } 
    }); 

    function switchToImg(image) { 
     $('#feature-image').fadeOut('300', function() { 
      $('#feature-image').css('background-image', 'url(images/main_' + image + '.jpg)'); 
      $('#feature-image').fadeIn('300'); 
     }); 
     $('#feature-links a.a-active').removeClass('a-active'); 
     $('#feature-links .' + image).addClass('a-active'); 
    }; 
});

測試中jsFiddle。

編輯：我刪除了電話.stop()，這是沒有必要的，並引入了一個錯誤。

來源

2011-10-27 08:24:41 GregL

謝謝Greg！這已經整理了我的問題！ :) –

沒問題！樂意效勞。 – GregL

如果你有興趣，我在這個jsFiddle修訂版中收緊了我的代碼：http://jsfiddle.net/rPFTd/3/。 – GregL

嘗試更改$('#feature-links a .a-active')至$('#feature-links a.a-active')。

a和.a-active之間的空格表示您試圖將<a>的後代與類a-活動相匹配。

來源

2011-10-27 08:17:03 socha23

感謝您發現此錯誤！ –

您可以使用:not選擇器篩選出活動類。

$（「＃功能鏈接：不是（.A有效）」）

來源

2011-10-27 08:19:31 Godzilla

Jquery類檢查和更改

回答

相關問題