0

我试图建立一个支持无线电的搜索框，通过一点搜索，我找到了我要找的东西。我试图让按钮看起来像切换，所以我遇到了这个！我喜欢它。这就是我要找的。但是，一旦我添加了 jQuery，整个搜索就不再起作用了。老实说，我不知道为什么。这是带有 jQ​​uery 的 HTML：

<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 很关键，我不能只从代码中删除它。原始网页的其他部分大量使用它。

4

1 回答 1

1

您按原样复制+粘贴小提琴中的代码。但是由于将分开的 HTML、JS 和 CSS 部分放在一起，您错过了一个重要部分：实际实例化要在 DOM 完全加载时执行的 jQuery 部分。

在小提琴中，最终的源代码为您提供：

<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>

更新：此外，在包含 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-18T19:01:41.920 回答