Question

我正在尝试构建一个支持无线电的搜索框，通过一点点搜索，我找到了我想要的东西。我试图让按钮看起来像切换，所以我遇到了this！我喜欢它。这就是我在寻找的东西。但是，一旦我添加了jQuery，整个搜索工作就再也没有了。说实话，我不知道为什么。这是使用jQuery的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很关键，我不能从代码中删除它。原始网页的其他部分正在大量使用它。

Answer 1

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

在小提琴中，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>

更新：此外，在包含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>

jQuery使另一个脚本出现故障

1 个答案: