Jquery - 如果宽度小于767则更改href

Question

我目前正在开发一个响应式网站.我开发了一个jquery脚本来更改链接中的href属性.

$("a.modal").attr("href", "https://secured.sirvoy.com/book.php?c_id=1602&h=ea3a7c9286f068fb6c1462fad233a5e0")

它工作得很好 - 但我希望它只针对屏幕宽度小于767像素(移动设备)的设备.

这个脚本应该工作,但我真的不能让它工作.

<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>

链接到网页.

http://visbyfangelse.se.linweb63.kontrollpanelen.se/rum-priser/

它是我想要改变的粉红色按钮的链接.

Answer 1

问题在于其他代码,实际上.羞于让你为我挖掘它.:P

$('a[name=modal]').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();
    // etc etc.

因此,您可以防止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.

添加了| 功能全文,以帮助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); 

});