Jquery - 如果宽度小于 767，则更改 href
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10187467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - If width less than 767 then change href
提问by Fruxelot
I am currently developing a responsive website. I've developed a jquery script that changes the href attribute in a link.
我目前正在开发一个响应式网站。我开发了一个 jquery 脚本来更改链接中的 href 属性。
$("a.modal").attr("href", "https://secured.sirvoy.com/book.php?c_id=1602&h=ea3a7c9286f068fb6c1462fad233a5e0")
Its working all fine - but i want it only to target devices that has a lesser screen width than 767 pixels (mobile devices).
它工作正常 - 但我希望它只针对屏幕宽度小于 767 像素的设备（移动设备）。
this script should work but i cant really get it to work.
这个脚本应该可以工作，但我真的无法让它工作。
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() < 767) {
$("a.modal").attr("href", "https://secured.sirvoy.com/book.php?c_id=1602&h=ea3a7c9286f068fb6c1462fad233a5e0")
}
});
</script>
Link to the webpage.
网页链接。
http://visbyfangelse.se.linweb63.kontrollpanelen.se/rum-priser/
http://visbyfangelse.se.linweb63.kontrollpanelen.se/rum-priser/
Its the link for the pink buttons i want to change.
它是我想更改的粉红色按钮的链接。
回答by John Green
The problem lies in the rest of your code, actually. Shame on you for making me dig for it. :P
实际上，问题在于您的代码的其余部分。为你让我挖掘它而感到羞耻。:P
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
// etc etc.
So, you prevent the href from firing because of preventDefault. Why not just patch your check in here:
因此，您可以防止 href 由于 preventDefault 触发。为什么不在这里修补您的支票：
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
if ($(window).width() < 767)
{
// I'm assuming you'd get this dynamically somehow;
location.href="https://secured.sirvoy.com/book.php?c_id=1602&h=ea3a7c9286f068fb6c1462fad233a5e0";
return;
}
// etc etc.
Added | Full text of function to help OP make his project work:
已添加 | 帮助 OP 使他的项目工作的功能全文：
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
if ($(window).width() < 767)
{
// I'm assuming you'd get this dynamically somehow;
location.href="https://secured.sirvoy.com/book.php?c_id=1602&h=ea3a7c9286f068fb6c1462fad233a5e0";
return;
}
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//transition effect
$(id).fadeIn(2000);
});
回答by Fabrizio Calderan
you could use window.matchmedia
你可以使用window.matchmedia
if (window.matchMedia("(max-width:768px)").matches) {
$("a.modal").attr("href", "...");
}
See http://caniuse.com/matchmediafor a compatibility list
有关兼容性列表，请参阅http://caniuse.com/matchmedia
回答by Usman Hayat Khan
this script will help you to detect screen size for all browsers
此脚本将帮助您检测所有浏览器的屏幕大小
var viewportwidth;
var viewportheight;
//Standards compliant browsers (mozilla/netscape/opera/IE7)
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight;
}
// IE6
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight;
}
//Older IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
}
alert( viewportwidth + "~" + viewportheight);
警报（视口宽度+“~”+视口高度）；
