jQuery неполадки другой скрипт

Я пытался создать окно поиска с поддержкой радио, и с небольшим поиском я нашел то, что искал. Я пытался заставить кнопки выглядеть как переключатели, поэтому я столкнулся с this! Мне нравится. Это то, что я искал. Но, как только я добавил jQuery, вся поисковая работа больше не работала. И, честно говоря, я понятия не имею, почему. Вот HTML с jQuery:jQuery неполадки другой скрипт

<html> 
<head> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> 
<script type="text/javascript"> 
function dosearch() { 
    var sf=document.searchform; 
    for (i=sf.sengines.length-1; i > -1; i--) { 
    if (sf.sengines[i].checked) { 
     var submitto = sf.sengines[i].value + escape(sf.searchterms.value); 
    } 
    } 
    window.location.href = submitto; 
    return false; 
} 
</script> 
<script type="text/javascript"> 
$('#sites input:radio').addClass('input_hidden'); 
$('#sites label').click(function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
}) 
</script> 
<style> 
.input_hidden { 
    position: absolute; 
    left: -9999px; 
} 
.selected { 
    background-color: #ccc; 
} 
#sites label { 
    display: inline-block; 
    cursor: pointer; 
} 
#sites label:hover { 
    background-color: #efefef; 
} 
#sites label img { 
    padding: 3px; 

} 
</style> 
</head> 
<body> 
<div id="sites"> 
<form name="searchform" onSubmit="return dosearch();"> 
<input id='first' name="sengines" type="radio" checked='checked' value="http://myurl.com/search?q="/><label for="first"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label> 
<input id='req' name="sengines" type="radio" value="http://www.myotherurl.com/search?q="/><label for="req"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label> 
<input type="text" name="searchterms"/> 
</form></div> 
</body> 
</html>

Удалить jQuery, и функция будет работать. jQuery является критическим, и я не могу просто удалить его из кода. Другие части оригинальной веб-страницы в значительной степени используют ее.

источник

2013-04-18 III.6

jsFiddle вы связаны с уже включает JQuery, но старая версия - вы уверены, что вы не делаете это дважды в вашем коде? –

'for (var i; ...' - DO инициализировать 'i' с' var'! –

Вы просматривали консоль javascript. Если это не работает, возможно, произошла ошибка с вашей копией и вставкой. – Danny

Вы копируете + вставляете код со скрипки как есть. Но поскольку разделенные части HTML, JS и CSS объединяются, вы пропустили важную часть: фактически создать экземпляр части jQuery, которая будет выполнена, когда DOM будет полностью загружена.

В скрипку, то final source code дает:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$('#sites input:radio').addClass('input_hidden'); 
$('#sites label').click(function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
}); 
});//]]>  
</script>

Update: Кроме того, вы не закрыли тег сценария правильно, когда в том числе JQuery. Это нарушило функциональность кода в теге скрипта сразу после включения jQuery.

Это <script src="jquery.js"/> следует читать <script src="jquery.js"></script>

Вот полностью рабочая версия Сейчас:

<!doctype html> 
<html> 
<head> 
    <style> 
    .input_hidden {position: absolute; left: -9999px;} 
    .selected {background-color: #ccc;} 
    #sites label {display: inline-block; cursor: pointer;} 
    #sites label:hover {background-color: #efefef;} 
    #sites label img {padding: 3px;} 
    </style> 
</head> 
<body> 
    <div id="sites"> 
    <form name="searchform" id="s"> 
     <input id='first' name="sengines" type="radio" checked='checked' value="http://myurl.com/search?q="> 
     <label for="first" class="selected"><img src="//sstatic.net/serverfault/img/favicon.ico" alt="Server Fault"></label> 
     <input id='req' name="sengines" type="radio" value="http://www.myotherurl.com/search?q="> 
     <label for="req"><img src="//sstatic.net/superuser/img/favicon.ico" alt="Super User"></label> 
     <input type="text" name="searchterms" id="searchterms"> 
    </form> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script> 
    $().ready(function() { 
    $('#sites input:radio').addClass('input_hidden'); 
    $('#sites label').click(function() { 
     $(this).addClass('selected').siblings().removeClass('selected'); 
    }); 
    $('#s').submit(function(e) { 
     e.preventDefault(); 
     window.location.href = $(this).find(':checked').val() + $('#searchterms').val(); 
     return !0; 
    }); 
    }); 
    </script> 
</body> 
</html>

источник

2013-04-18 19:01:41 eyecatchUp

Эта проблема с добавленными классами. Но все-таки вещь "window.location.href" не работает. Спасибо вам все равно ^^ ر –

Что именно не работает для вас? – eyecatchUp

Получил это. Вы забыли закрыть тег скрипта jQuery и тем самым нарушили функциональность части JS. См. Мой обновленный ответ для полностью работающей версии кода. – eyecatchUp

jQuery неполадки другой скрипт

ответ

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