javascript - 试图切换某些东西并隐藏切换按钮

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/