JQuery trigger insertBefore на основе ширины экрана и класса корпуса

Я создал следующий скрипт jQuery, который будет перемещать div (# вторичный) перед другим (#primary), если ширина экрана равна или меньше 767 пикселей, и это работает хорошо.JQuery trigger insertBefore на основе ширины экрана и класса корпуса

jQuery(document).ready(function(){ 
if(screen.width<=767){ 
jQuery('#secondary').insertBefore('#primary'); 
} 
});

Однако я хотел бы действительную функцию, чтобы вызвать как на ширину экрана и корпуса, имеющего определенный класс (body.single). Я написал следующее, но его не работает, я думаю, что я ошибаюсь где-то с этим утверждением, и это то, что у меня есть до сих пор.

jQuery(document).ready(function(){ 
if(screen.width<=767) && ('body').hasClass('.single') { 
jQuery('#secondary').insertBefore('#primary'); 
} 
});

Я надеюсь, что кто-то сможет объяснить, где я сделал ошибку, и как исправить это. Заранее спасибо ко всем

источник

2016-01-29 Paul

.hasClass ('одиночные') без точки .. если (screen.width <= 767 && $ ('тело'). HasClass ('одного')) { –

1: в качестве сказал в комментарии .hasClass('class without dot')

второй:('body') предполагают, чтобы быть jQuery('body')

третий: с, если заявление использовать его как это

if(screen.width() <=767 && $('body').hasClass('.single')){

Окончание ваш код должен быть

jQuery(document).ready(function(){ 
    if(screen.width() <= 767 && jQuery('body').hasClass('single')){ 
    jQuery('#secondary').insertBefore('#primary'); 
    } 
});

Working Demo

Примечание: Я не знаю, что вы имеете в виду с экрана или где вы определили его, но в то время как вы сказали (и это работает отлично .) мой код должен работать с вами .. вы можете использовать $(window).width() вместо screen.width() в случае, если вам это нужно

jQuery(document).ready(function(){ 
 
    if($(window).width() <= 767 && 
 
    jQuery('body').hasClass('single')){ 
 
    jQuery('#secondary').insertBefore('#primary'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body class="single"> 
 
    <div id="primary">Primary</div> 
 
    <div id="secondary">Secondary</div> 
 
</body>

источник

2016-01-29 14:37:29

Привет Мохамед, Большое спасибо за ваш вклад, однако я следил за вашими предложениями и он все еще не работает, я даже пытался использовать $ (window) .width(), как вы предполагали, но он все равно не сработает. Я знаю, что jQuery - это не моя сильная сторона, но я не понимаю, почему она не работает? – Paul

@Paul он уже отлично работает здесь https://jsfiddle.net/mohamedyousef1980/92cbhxLx/ –

Привет, Мохамед в вашем jsfiddle вы использовали addClass, чтобы назначить «сингл» телу, но он работает, но я воссоздал его так, как должен используйте jsfiddle (который я новичок), и он не видит здесь: - https://jsfiddle.net/9wwbqzhy/ – Paul

Спасибо всем, кто внес свой вклад, однако независимо от того, что я сделал, я просто не мог получить код для работы, у меня есть ряд других фрагментов кода работает как хорошо, и это может иметь были те, что вызывали проблему.

Однако я нашел решение и оглядываясь назад, я должен был отпустить его раньше. Вместо того, чтобы спросить, была ли ширина экрана меньше 767, и если тело имело класс один, мне просто нужно было изменить фактическое перемещение div таким образом.

jQuery(document).ready(function(){ 

if(screen.width<=767){ 

jQuery('body.single #secondary').insertBefore('#primary'); 
} 

});

Я надеюсь, что это поможет любому, у кого есть такая же проблема.

Спасибо Все

источник

2016-01-30 10:11:50 Paul

JQuery trigger insertBefore на основе ширины экрана и класса корпуса

ответ

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