JQUERY:使用$(this)创建自定义函数

时间:2016-09-25 03:33:10

标签: jquery html css

大约一年前,我做了一个问卷,这是一个单页网站,有多个div作为页面,我用按钮打开和关闭。当时我并没有像现在这样知道,所以我为每个按钮编写了JQUEry,如下所示。

$("#start_btn").click(function(){
  $("#welcome").css("display","none");
  $("#page01").fadeIn('slow');
  $("#MainPage").css("background","rgba(255, 255, 255, .44)");
  window.scrollTo(0, 0);
});

$("#p1_next").click(function(){
  $("#page01").css("display","none");
  $("#page02").fadeIn('slow');
  window.scrollTo(0, 0);
});

$("#p2_back").click(function(){
  $("#page02").css("display","none");
  $("#page01").fadeIn('slow');
  window.scrollTo(0, 0);
});
$("#p2_next").click(function(){
  $("#page02").css("display","none");
  $("#page03").fadeIn('slow');
  window.scrollTo(0, 0);
});

$("#p3_back").click(function(){
  $("#page03").css("display","none");
  $("#page02").fadeIn('slow');
  window.scrollTo(0, 0);
});
$("#p3_next").click(function(){
  $("#page03").css("display","none");
  $("#page04").fadeIn('slow');
  window.scrollTo(0, 0);
});

$("#p4_back").click(function(){
  $("#page04").css("display","none");
  $("#page03").fadeIn('slow');
  window.scrollTo(0, 0);
});
$("#p4_next").click(function(){
  $("#page04").css("display","none");
  $("#page05").fadeIn('slow');
  window.scrollTo(0, 0);
});

$("#p5_back").click(function(){
  $("#page05").css("display","none");
  $("#page04").fadeIn('slow');
  window.scrollTo(0, 0);
});
$("#p5_next").click(function(){
  $("#page05").css("display","none");
  $("#page06").fadeIn('slow');
  window.scrollTo(0, 0);
});

$("#p6_back").click(function(){
  $("#page06").css("display","none");
  $("#page05").fadeIn('slow');
  window.scrollTo(0, 0);
});
$("#p6_next").click(function(){
  $("#page06").css("display","none");
  $("#page07").fadeIn('slow');
  window.scrollTo(0, 0);
  });

每页还有24页,每页2个按钮。现在我知道更多了,我试图通过这样做来实现同样的目标。

function Page_Turn(){

    var turn = $(this).data("turn_to");

        $(this).click(function(){
            $(this).css("display", "none");
            $(turn).css("display", "block");
        })  
}

这是我试图用它触发的HTML。

<div id="Test_Page_02" class="content_section text_section_a Page color_style_b_1">
        PAGE 02

        <div class="button_normal button_right color_style_b_1" data-turn_to="#Test_Page_01" onclick="Page_Turn()">
            PREVIOUS
        </div>

        <div class="button_normal button_right color_style_b_1" data-turn_to="#Test_Page_03" onclick="Page_Turn()">
            NEXT
        </div>

    </div>

功能的相关CSS是这个

.Page{
    height: 44em;
    margin: auto;
    border-radius: 0.33em;
    position: relative;
}

#Test_Page_01{
    display: block;
}

#Test_Page_02{
    display: none;
}

#Test_Page_03{
    display: none;
}

#Test_Page_04{
    display: none;
}

到目前为止,我还没有能够让它发挥作用。我最初开始使用

$(this).attr("data-turn_to");

在var中,我还把它包装在

$(document).ready(function(){

})

并尝试使用

将其设为自定义函数
$.fn.PageTurn = function(){
            var turn = $(this).attr("data-turn_to");

            $(this).onclick(function(){
                $(this).css("display", "none");
                $(turn).css("display", "block");
            });

        }

在那个例子中,我正在使用

.onclick()

我改为

.click()

我所做的一切似乎都没有用,我在控制台上看不到任何错误,我迷失了。这是迄今为止我所拥有的其中包括其他css元素的小提琴。 https://jsfiddle.net/Optiq/evz2r8h4/1/

2 个答案:

答案 0 :(得分:3)

使用jquery,您不需要在html中调用已定义的函数。相反,你可以做类似的事情:

JS Fiddle

$('[data-turn_to]').on('click', function() {
  var turn = $(this).attr("data-turn_to");
  $(this).parent().css("display", "none"); // hide the parent (not just the clicked element)
  $(turn).css('display', 'block');
});

答案 1 :(得分:1)

如果我理解正确,你可以用一个简单的代码

来做到这一点
  1. 为所有页面div添加公共类和唯一ID。
  2. 所有点击按钮的公共div,其数据属性类似于data-turn-to =&#34;&#34;
  3. 使用以下代码:

    $('.common-div-class').click(function(){
      var id = $(this).attr('data-turn-on');
      $('.common-div-class').hide();
      $('#' + id).show();
    })