2016-08-10 52 views
0

我試圖讓我的腳本:通過單擊鏈接(#breakCSSButton)上無法設置中繼檢視點寬度回到屏幕的寬度

  1. ,改變meta標籤的視寬1280調整它的大小。

  2. 再次點擊該鏈接後,更改元標記的視寬回到window.screen.width

我不明白爲什麼它不工作。我有一個錨標記按鈕:

<a href="#" id="breakCSSButton">

繼承人的代碼:

$(function() { 
if ($('#breakCSSButton').hasClass('dviewToggledOn') == false) { 
    console.log($('#breakCSSButton').hasClass('dviewToggledOn')); 
    $('#breakCSSButton').on('click', function() { 
     viewportBreak = document.querySelector("meta[name=viewport]"); 
     viewportBreak.setAttribute('content', 'user-scalable=1, initial-scale=1, maximum-scale=4, width=1280'); 
     $(window).resize(); 
     $('#breakCSSButton').toggleClass('dviewToggledOn'); 
    }); 
} 
if ($('#breakCSSButton').hasClass('dviewToggledOn') == true) { 
    $('.dviewToggledOn').on('click', function() { 
     deviceScreenWidth = window.screen.width; 
     viewportBreak = document.querySelector("meta[name=viewport]"); 
     viewportBreak.setAttribute('content', "user-scalable=1, width=" + deviceScreenWidth + ", initial-scale=1, maximum-scale=4"); 
     $(window).resize(); 
     $('#breakCSSButton').toggleClass('dviewToggledOn'); 
    }); 
} 

}); 
+0

'$(function(){/ * ... * /})'代碼在頁面加載後運行一次。所以,當頁面加載時,您正在檢查課程,設置點擊處理程序等。您應該在點擊處理程序中進行這些檢查並更改行爲,以便每次單擊該鏈接時都會進行檢查。 – Whothehellisthat

+0

@Whothehellist我不確定底部的答案是什麼意思。它沒有工作。 :( – nakji

+0

元標記在頁面加載時被解析,你不能在稍後更新它們,並期望它們改變任何東西;你需要重新加載,但重新加載將重置更改,所以基本上,你不能這樣做。 .. – dandavis

回答

0

@Whothehellisthat似乎沒有工作...這是你的意思?:

$('#breakCSSButton').on('click', function() { 
if ($('#breakCSSButton').hasClass('dviewToggledOn') == false) { 
    viewportBreak = document.querySelector("meta[name=viewport]"); 
    viewportBreak.setAttribute('content', 'user-scalable=1, initial-scale=1, maximum-scale=4, width=1280'); 
    $(window).resize(); 
    $('#breakCSSButton').toggleClass('dviewToggledOn'); 
    } 

if ($('#breakCSSButton').hasClass('dviewToggledOn') == true) { 
    deviceScreenWidth = window.screen.width; 
    viewportBreak = document.querySelector("meta[name=viewport]"); 
    viewportBreak.setAttribute('content', "user-scalable=1, width=" + deviceScreenWidth + ", initial-scale=1, maximum-scale=4"); 
    $(window).resize(); 
    $('#breakCSSButton').toggleClass('dviewToggledOn'); 
    } 
}); 
0

好的以下工作。我決定在兩個不同的html按鈕上做一個.show和.hide。這種方式的代碼更簡單。我認爲問題在於它不喜歡在多個動態更改(即添加一個類並對其進行處理)之後處理同一元素(#breakCSSButton)。它可能也已經認識到在同一類上的點擊動作並運行基於單擊的if語句...

$(function() { 
     $('#breakCSSButton').on('click', function() { 
      viewportBreak = document.querySelector("meta[name=viewport]"); 
      viewportBreak.setAttribute('content', 'user-scalable=1, initial-scale=1, maximum-scale=4, width=1280'); 
      $(window).resize(); 
      $('#breakCSSButton').hide(); 
      $('#restoreCSSButton').show(); 
     }); 
    }); 

    $(function() { 
     $('#restoreCSSButton').on('click', function() { 
      deviceScreenWidth = window.screen.width; 
      viewportBreak = document.querySelector("meta[name=viewport]"); 
      viewportBreak.setAttribute('content', "user-scalable=1, width=" + deviceScreenWidth + ", initial-scale=1, maximum-scale=4"); 
      $(window).resize(); 
      $('#breakCSSButton').show(); 
      $('#restoreCSSButton').hide(); 
     }); 
    });