嘗試切換某些內容並隱藏切換按鈕

Question

因此，當我單擊佔位符時，它應該消失並顯示其他內容，因此我將此圖像佔位符用作我的切換按鈕。但是，當點擊.chrome時，它會消失，但switchScreen不顯示。

.chrome充當按鈕，並嘗試切換switchScreen

$(document).ready(function(){ 

    var switchScreen = ".home"; 

    $(".chrome").click(function() { 
     var clicked = $(this).attr('rel'); 
     screenSwitcher('.' + clicked); 
    }); 

    function screenSwitcher(switchScreen){ 
     $(".switchScreen").css('display', 'none'); 
     $(switchScreen).fadeIn('slow'); 
    } 

    $(".chrome").click(function(){ 
     $(this).css('display', 'none'); 
    }); 
    screenSwitcher(switchScreen); 

}); 

Answer 1

有與你爲一個編碼的幾個問題你有$(".chrome").click(兩次，你可以結合這兩種成一個功能。你想要做的是在頁面第一次加載時隱藏你的.swithScreen，你可以在文檔就緒功能中做到這一點。無論如何看這個代碼它應該有所幫助。

的Html

<img class="chrome" rel="switchScreen" src="/plato/resources/images/delete.png" /> 

<p class="switchScreen">hoho</p> 

的Javascript/jQuery的

$(document).ready(function(){ 
    $(".switchScreen").css('display', 'none'); 
    $(".chrome").click(function() { 
     $(this).css('display', 'none'); 
     var clicked = $(this).attr('rel'); 
     screenSwitcher('.' + clicked); 
    }); 
    function screenSwitcher(switchScreen){ 
    $(switchScreen).fadeIn('slow'); 
    } 
}); 

http://jsfiddle.net/BBpKV/2/

然而這個相同的功能，可以在更短的代碼來實現。

$(document).ready(function(){ 
    $(".switchScreen").hide(); 
    $(".chrome").click(function() { 
    $(this).hide(); 
    $(".switchScreen").fadeIn('slow'); 
    }); 
}); 

http://jsfiddle.net/BBpKV/4/