Изменить класс с jquery

Привет, я использую css framework от w3school.com, поэтому мне нужно изменить какой-то класс, чтобы получить лучшее представление evry, когда пользователь меняет ширину окна, а для этого я использую jquery, но не работает. получить просьбу о помощи и поблагодарить вас ее источник кода.Изменить класс с jquery

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    <script http://googleads.g.doubleclick.net/pcs/click?xai=AKAOjsskoPaKjpYu8DK0oiP7OYYa9-A9I7CpjKFG67eM5bDqwk7ZV2TT-34qu4fCp92Y2TEIfbX8dj-6vPUezLZ60FPo9y2zGtNrl64NtBc_79RxtrJhBn26YWvvq1XiSZtWXfY-ML7nBmtrCTm02RWO8eiXGK-gctEOfZvzaFRQISYn4GlDgpkqNyEMUm6X6-eKP7xTMr4vzjmPShzKYVE_xNd-siI_3Pk_-2U6c3x5HZpHZGOg6Fo&sig=Cg0ArKJSzAR_3zib5yc4&adurl=http://www.w3schools.com/w3css/w3css_templates.asp&nm=2&nx=179&ny=48&mb=1src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
var w = window.innerWidth; 
function resize(){ 
if (w > 1366){ 
    $(".object").addClass("w3-quarter").removeClass("w3-half w3-third"); 
} if else (w <= 1366 && w > 800){ 
    $(".object").addClass("w3-third").removeClass("w3-half w3-qurter"); 
} else { $(".object").addClass("w3-half").removeClass("w3-third w3-qurter"); 
} 
} 
$(document).ready(function(){ 
resize(); 
$(window).resize(resize); 
}); 

</script> 
</head> 
<body> 

<h1>Heading 1</h1> 
<h2>Heading 2</h2> 

<div class="object w3-qurter"> 
    <p>This is a paragraph.</p> 
    <p>This is another paragraph.</p> 
</div> 
<div class="object w3-qurter"> 
    <p>This is a paragraph.</p> 
    <p>This is another paragraph.</p> 
    </div> 
<div class="object w3-qurter"> 
    <p>This is a paragraph.</p> 
    <p>This is another paragraph.</p> 
</div> 
<div class="object w3-qurter"> 
    <p>This is a paragraph.</p> 
    <p>This is another paragraph.</p> 
</div> 


</body> 
</html>

источник

2016-11-05 Abderrazzak Benbouya

Я бы настоятельно рекомендуем вам сбросить библиотеку w3schools. Честно говоря, это абсолютный мусор, а также большинство связанных с W3S вещей. Если вам нужен надежный, кросс-браузерный, отзывчивый CSS-фрейм, попробуйте Bootstrap. –

Благодарю вас за совет. Я новичок в кодировании, я сделаю. –

you have not called jquery properlly, please add jquery as mentioned in below code. 

<html> 
<head> 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    <script src="http://googleads.g.doubleclick.net/pcs/click?xai=AKAOjsskoPaKjpYu8DK0oiP7OYYa9-A9I7CpjKFG67eM5bDqwk7ZV2TT-34qu4fCp92Y2TEIfbX8dj-6vPUezLZ60FPo9y2zGtNrl64NtBc_79RxtrJhBn26YWvvq1XiSZtWXfY-ML7nBmtrCTm02RWO8eiXGK-gctEOfZvzaFRQISYn4GlDgpkqNyEMUm6X6-eKP7xTMr4vzjmPShzKYVE_xNd-siI_3Pk_-2U6c3x5HZpHZGOg6Fo&sig=Cg0ArKJSzAR_3zib5yc4&adurl=http://www.w3schools.com/w3css/w3css_templates.asp&nm=2&nx=179&ny=48&mb=1" ></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
var w = window.innerWidth; 
var w = window.innerWidth; 
function resize(){ 
if (w > 1366){ 
    $(".object").addClass("w3-quarter").removeClass("w3-half w3-third"); 
} else if (w <= 1366 && w > 800){ 
    $(".object").addClass("w3-third").removeClass("w3-half w3-qurter"); 
} else { $(".object").addClass("w3-half").removeClass("w3-third w3-qurter"); 
} 
} 
$(document).ready(function(){ 
resize(); 
$(window).resize(resize); 
}); 

</script> 
</head> 
<body> 

<h1>Heading 1</h1> 
<h2>Heading 2</h2> 

<div class="object w3-qurter"> 
    <p>This is a paragraph.</p> 
    <p>This is another paragraph.</p> 
</div> 
<div class="object w3-qurter"> 
    <p>This is a paragraph.</p> 
    <p>This is another paragraph.</p> 
    </div> 
<div class="object w3-qurter"> 
    <p>This is a paragraph.</p> 
    <p>This is another paragraph.</p> 
</div> 
<div class="object w3-qurter"> 
    <p>This is a paragraph.</p> 
    <p>This is another paragraph.</p> 
</div> 


</body> 
</html>

источник

2016-11-05 15:11:37

OK. Я сделаю только вы можете проверить мой код jquery, потому что я буду использовать платформу начальной загрузки и спасибо. –

Ваш код jquery в порядке, вам нужно только добавить класс начальной загрузки для управления шириной div, имеющей имя класса «объект». см ниже код ... 'функция изменения размера() { если (ш> 1366) { $ (». Объекта "). AddClass (" цв-LG-2 "). RemoveClass (" коллектив- sm-12 col-sm-3 "); } else if (w <= 1366 && w> 800) { $ (". Object"). AddClass ("col-sm-3"). RemoveClass ("col-sm-12 col-lg-2"). ; } else {$ (". Object"). AddClass ("col-sm-12"). RemoveClass ("col-lg-2 col-sm-3"); } } ' –

Вы получаете только окно.innerWidth при первом загрузке скрипта. Переместите переменную ш внутри функции изменения размера, так что вы проверить каждый раз, когда вызывается функция:

function resize(){ 
    //This will check width every time the resize function is called 
    var w = window.innerWidth; 
    if (w > 1366){ 
    $(".object").addClass("w3-quarter").removeClass("w3-half w3-third"); 
    } if else (w <= 1366 && w > 800){ 
    $(".object").addClass("w3-third").removeClass("w3-half w3-qurter"); 
    } else { $(".object").addClass("w3-half").removeClass("w3-third w3-qurter"); 
    } 
    }

источник

2016-11-05 14:19:11

Спасибо, но он по-прежнему не работает, если вы можете сказать, что это не так. –

Изменить класс с jquery

ответ

Смежные вопросы