與JS和jQuery響應文本

我想在我的網站上設置一個簡單的標題，如果窗口縮放或加載低於某個px寬度，更改文本內更短，然後如果再縮放更大再次彈出到原始HTML。但是，由於某種原因，這被證明是非常困難的。與JS和jQuery響應文本

現在我有：

<script> 
if ($(window).width() > 480) {  
    $(".title").html("<a class='title' href='/'>LONGTEXTLONGTEXT</a>"); 
} 
</script> 

<script> 
window.addEventListener('resize', function(event){ 
    if ($(window).width() < 480) {  
     $(".title").html("<a class='title' href='/'>SHORTTEXT</a>"); 
    } 
}); 
</script>

但由於某些原因，它只是失敗。

任何想法？

來源

2016-02-04 RNPF

爲什麼不只是使用CSS媒體查詢？ – j08691

你的javascript語法錯誤 - 在'addEventListener（）'調用結束時缺少'）;'。解決這個問題，它似乎工作正常 – Rhumborl

'CSS''em'會照顧你所需要的.. – Zak

至於建議，這是更好地沒有JavaScript使用CSS媒體查詢完成（而不需要改變字體大小）。

把頁面，並顯示在長和短標題鏈接/隱藏它們取決於寬度：

div.title { background-color:#ff0; border-bottom:1px solid #000; } 
 

 
/* this is for anything less than 480px */  
 
.title > .title { display:none; } 
 
.title > .titlesmall { display:initial; } 
 

 
/* greater than 480px */ 
 
@media screen and (min-width: 480px){ 
 
    .title > .title { display:initial; } 
 
    .title > .titlesmall { display:none; } 
 
}

<div class="title"> 
 
    <a class='title' href='/'>Some really long title</a> 
 
    <a class='titlesmall' href='/'>CD</a> 
 
</div>

可選擇地固定所述語法錯誤，並且優選地還使用jQuery聽到resize事件，也應該工作不夠好：

<div class="title"> 
 
    <a class='title' href='/'>Some really long title</a> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script> 
 
    if ($(window).width() < 480) { 
 
    $(".title").html("<a class='title' href='/'>CD</a>"); 
 
    } 
 
</script> 
 

 
<script> 
 
    $(window).on('resize', function(event) { 
 
    if ($(window).width() < 480) { 
 
     $(".title").html("<a class='title' href='/'>CD</a>"); 
 
    } 
 
    }); 
 
</script>

來源

2016-02-04 22:00:31 Rhumborl

謝謝！這也可以完全解決問題，並測試它，工作正常。 – RNPF

這可以而且應該用CSS完成。這裏是我會怎麼做：

/* this is for anything less than 480px */  
.title{ font-size: 1em; } 

... 

/* greater than 480px */ 
@media screen and (min-width: 480px){ /*change min-width to em if you prefer*/ 
    .title{ font-size: 1.25em; } 
}

你可以選擇任何你想要的字體大小。出於好奇，是否有一個特定的原因，你想用JavaScript來做到這一點？

來源

2016-02-04 21:45:09

因爲我不想改變鏈接字體的大小，所以我試圖改變鏈接文本的內容。所以，而不是標題越來越小，文字會變得更小 - EG：從「Bigtexthere」到「文字」 – RNPF

好的。現在我明白了。很高興看到你現在正在工作！ –

還有另外一種方式，通過CSS來實現這一目標：

風格：

@media only screen and (min-width: 960px) { 
    .title-small { 
     display: none; 
    } 
} 

@media only screen and (max-width: 960px) { 
    .title-small { 
     display: block; 
    } 

    .title { 
     display: none; 
    } 
}

HTML：

<h1 class="title">Hello This is a long title.</h1> 
<h1 class="title-small">Short title</h1>

來源

2016-02-04 21:50:32 Dinever

我顯然在措辭嚴重的問題，我的壞！目標不是更改字體大小，而是更改鏈接中的文本。 EG：'LONGTEXT'到'ST' – RNPF

想通了。

<script> 
$(document).ready(larg); 

$(window).resize(larg); 

function larg(){ 
if ($(window).width() < 480) {  
$(".title").html("<a class='title' href='/'>Smaller Text</a>"); 
} 
else { 
$(".title").html("<a class='title' href='/'>Text</a>"); 
} 
} 
</script>

將替換兩個加載文本，並調整大小。

來源

2016-02-04 22:00:56 RNPF

嘗試字體真棒。這是響應式文本的一個很好的解決方案。

來源

2016-02-04 22:02:13

與JS和jQuery響應文本

回答

相關問題