基於屏幕寬度和正文類的JQuery觸發器insertBefore

我已經創建了下面的jQuery腳本，它將在另一個（#primary）之前移動div（#priority），如果屏幕寬度等於或小於767px，精細。基於屏幕寬度和正文類的JQuery觸發器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')

3：與if語句這樣使用它

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觸發器insertBefore

回答

相關問題