2013-02-26 3 views
0

Я пытаюсь захватить параметр из URL-адреса, например.jquery get value from url then re-order divs

www.x.com/?source=display & зоны = ЖЕ & тема = облако

Итак, если тема «облако», который она тогда я хочу, чтобы повторно заказать 3 отдельных Див-х.

Это то, что я до сих пор в моем заголовке:

<script type="text/javascript"> 
if (window.location.search.indexOf('topic=cloud') > -1) { 
    alert('track present'); 
    $(".one").insertAfter(".two"); 
} else { 
    $(".two").insertAfter(".three"); 
    alert('track not here'); 
} 
</script> 

и HTML, как это:

<div class="one">seo</div> 
<div class="two">cloud</div> 
<div class="three">social</div> 

Я получаю предупреждение, но когда я использую .insertAfter();

я ничего не получайте

ответ

0

Возможно, вы получаете сообщение об ошибке jQuery's $ еще не определено. Просмотрите инструменты FireBug или Web Developer для проверки. До этой строки вы не ссылаетесь на jQuery $, поэтому ошибка не возникает.

Возможность 1: Убедитесь, что вы включили jQuery на страницу.

Что-то вроде этого, если местное:

<script type="text/javascript" src="js/jquery.js"></script>

Нечто подобное при использовании CDN (размещенная) версии:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Возможность 2: Убедитесь, что вы включили JQuery ПЕРЕД указателем $. Переместите ваш <script> включите выше остальных ваших скриптов.

Возможность 3: Если вы используете другую библиотеку как прототип, ссылка jQuery непосредственно (вместо $):

<script type="text/javascript"> 
if (window.location.search.indexOf('topic=cloud') > -1) { 
    alert('track present'); 
    jQuery(".one").insertAfter(".two"); // note jQuery, not $ 
} else { 
    jQuery(".two").insertAfter(".three"); // note jQuery, not $ 
    alert('track not here'); 
} 
</script> 
2

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

<?php if (isset($_GET['topic']) && 'cloud' == $_GET['topic']) { ?> 
    <div class="one"></div> 
    <div class="two">cloud</div> 
    <div class="three">social</div> 
<?php } else { ?> 
    <div class="one">seo</div>   
    <div class="three">social</div> 
    <div class="two">cloud</div> 
<?php } ?> 
+1

Это кажется лучше, чем вставлять их в неправильном порядке изначально, лучше сделать это справа f в первый раз, чем исправить позже. –

+0

Согласен. Зачем передавать клиенту то, что можно сделать на сервере? Браузеры с более старыми/медленными/JS-оценками оценят это с сервера. –

2

Используйте документ готов и ваш код будет делать то, что вы ожидаете:

<script type="text/javascript"> 
$(function() { //<-- you are missing this 

if (window.location.search.indexOf('topic=cloud') > -1) { 
    alert('track present'); 
    $(".one").insertAfter(".two"); 
} else { 
    $(".two").insertAfter(".three"); 
    alert('track not here'); 
} 

}); // <-- and the closing element 
</script> 

Следующая отлично работает, попробовать и посмотреть, как он сравнивает код (также прочитать Хуану Мендес комментирует, когда он объясняет, что происходит):

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
    $(function() { 
     if (window.location.search.indexOf('topic=cloud') > -1) { 
      alert('track present'); 
      $(".one").insertAfter(".two"); 
     } else { 
      $(".two").insertAfter(".three"); 
      alert('track not here'); 
     }  
    }); 
    </script> 
</head> 
<body> 
    <div class="one">seo</div> 
    <div class="two">cloud</div> 
    <div class="three">social</div> 
</body> 
</html> 
+1

Пояснение: код OP пытается запустить до того, как HTML разобран, поэтому '$ ('. One')' и '$ ('. Two')' в данный момент не существует. Это одна из причин, по которым мне не нравится jQuery, нет ошибки при вызове метода в пустой коллекции, скрывающей много ошибок. –

+0

Я обновил это. И до сих пор нет переупорядочения моих дивизий, чего я мог забыть? – user388069

+1

Кажется работать здесь: http://jsfiddle.net/xUVLT/ – insertusernamehere