大约一年前,我做了一个问卷,这是一个单页网站,有多个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/
答案 0 :(得分:3)
使用jquery,您不需要在html中调用已定义的函数。相反,你可以做类似的事情:
$('[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)
如果我理解正确,你可以用一个简单的代码
来做到这一点使用以下代码:
$('.common-div-class').click(function(){
var id = $(this).attr('data-turn-on');
$('.common-div-class').hide();
$('#' + id).show();
})