Question

我有一个页面，其中包含一些可以在不同内容中淡入淡出的可点击图标，以及一个接收事件（来自点击处理程序）或变量（来自获取请求）的功能，以便在点击相关链接时显示正确的内容别处）。单击时一切都按预期工作，但是当我尝试使用变量参数时，函数会进入正确的if语句，但dom操作不会仅发生在test console.logs中。想知道是否有人知道为什么？之前我使用eval来做这件事，所以我宁愿让这个工作也不要回去！感谢

page = <?php echo (int) $_GET["pg"] ?>;
if(page){
    servicePage(event,page);
}

$(document).ready(function(){
$(".service_button").click(servicePage);
})

function servicePage(event, pg =0){

console.log(this.id);
console.log(pg);    
if(this.id == 1 || pg == 1){
    console.log('here');
  $( "div.service_page2" ).hide();
  $( "div.service_page3" ).hide();
  $( "div.service_page4" ).hide();
  $("div.service_page1").fadeIn();
  $( ".service_button1" ).animate({
  width:"100%"},300);
  $( ".service_button2" ).animate({
  width:"50%"},300);
   $( ".service_button3" ).animate({
   width:"50%"},300);
   $( ".service_button4" ).animate({
   width:"50%"},300);

}

if(this.id == 2 || pg == 2){
    console.log('whut');
        $( "div.service_page1" ).hide();
  $( "div.service_page3" ).hide();
  $( "div.service_page4" ).hide();
  $("div.service_page2").fadeIn();
   $( ".service_button1" ).animate({
 width:"50%"},300);
   $( ".service_button2" ).animate({
 width:"100%"},300);
   $( ".service_button3" ).animate({
 width:"50%"},300);
   $( ".service_button4" ).animate({
 width:"50%"},300);
}

if(this.id == 3 || pg == 3){
     $( "div.service_page1" ).hide();
      $( "div.service_page2" ).hide();
      $( "div.service_page4" ).hide();
      $("div.service_page3").fadeIn();
        $( ".service_button1" ).animate({
     width:"50%"},300);
       $( ".service_button2" ).animate({
     width:"50%"},300);
       $( ".service_button3" ).animate({
     width:"100%"},300);
       $( ".service_button4" ).animate({
     width:"50%"},300);
}

if(this.id == 4 ||pg == 4){
     $( "div.service_page1" ).hide();
      $( "div.service_page2" ).hide();
      $( "div.service_page3" ).hide();
      $("div.service_page4").fadeIn();
        $( ".service_button1" ).animate({
     width:"50%"},300);
       $( ".service_button2" ).animate({
     width:"50%"},300);
       $( ".service_button3" ).animate({
     width:"50%"},300);
       $( ".service_button4" ).animate({
     width:"100%"},300);
    console.log('why');
 }
}

Answer 1

当您尝试拨打servicePage(event,page)时，您在DOM中没有这些元素。您可以通过在$(document).ready()回调中移动此来电来轻松放弃此操作：

var page = <?php echo (int) $_GET["pg"] ?>;
$(document).ready(function(){
  $(".service_button").click(servicePage);
  if(page){
    servicePage(null, page);
  }
});

此外，如果您只是使用call将正确的内容传递给函数（因为您根本不使用event参数），则可以完全删除参数：

function servicePage() {
  switch (+this.id)
    case 1: // ...
}

$(document).ready(function(){
  $(".service_button").click(servicePage);
  if (page) {
    servicePage.call({id: page});
  }
});

至于功能本身，它可以（并且应该）简化。请注意，对于param的每个值，您可以执行以下两项操作：激活page元素，然后停用“其他”元素。一种可行的方法：

function activatePage(pageNo) {
  $('div.service_page' + pageNo).fadeIn();
  $('.service_button' + pageNo).animate({ width: '100%' }, 300);
}

function deactivatePagesOtherThan(activePageNo) {
  var inactivePages = [1,2,3,4].filter(function(no) {
    return no !== activePageNo;
  });
  var inactivePageSelectors = inactivePages.map(function(no) {
    return 'div.service_page' + no;
  });
  var inactiveButtonSelectors = inactivePages.map(function(no) {
    return '.service_button' + no;
  });
  $(inactivePageSelectors.join(',')).hide();
  $(inactiveButtonSelectors.join(',')).animate({ width: '50%' }, 300);
}

function servicePage() {
  var no = +this.id;
  if (no >= 1 && no <= 4) {
    deactivatePagesOtherThan(no);
    activatePage(no);
  }
}

奇怪的功能行为，适用于一个参数，部分适用于另一个参数

1 个答案: