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/

尝试切换某些内容并隐藏切换按钮

1 个答案: