问题描述
- 下了一个搜索代码，可按钮没反应，怎么弄啊，大虾们
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery下拉选择城市插件hhDrop - 站长素材</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/jquery/jquery.min.js"></script> <script type="text/javascript" src="js/hhDrop.js"></script> <script> $(function(){ $('#hhDrop00').hhDrop({}); $('#hhDrop01').hhDrop({}); }) </script> </head> <body> <div class="lineSearch"> <ul> <li class="thRelative" id="hhDrop00"> <div class="boxSearch"> <span class="key_word"> <b class="size_14">北京</b> 出发城市 </span> <em class="ico thLeft ico_shBlue"></em> <a class="thRight ico btn_search" href="javascript:void(0)"></a> </div> <div class="search_form_suggest" style="display:none;"> <h3><a class="ico btn_close thRight" item="close">关闭</a>热门出发城市</h3> <dl class="search_hotList"> <dd class="clr_after"> <a href="#">北京</a> <a href="#">上海</a> <a href="#">广州</a> <a href="#">成都</a> <a href="#">杭州</a> <a href="#">南京</a> <a href="#">深圳</a> <a href="#">济南</a> <a href="#">石家庄</a> <a href="#">武汉</a> <a href="#">郑州</a> <a href="#">重庆</a> <a href="#">福州</a> <a href="#">西安</a> <a href="#">长沙</a> <a href="#">沈阳</a> <a href="#">天津</a> <a href="#">哈尔滨</a> <a href="#">苏州</a> <a href="#">南宁</a> </dd> </dl> <div class="clear"></div> </div> </li> <li class="thRelative" id="hhDrop01"> <div class="boxSearch"> <span class="key_word"> <b class="size_14">广州</b> 到达城市 </span> <em class="ico thLeft ico_shBlue"></em> <a class="thRight ico btn_search" href="javascript:void(0)"></a> </div> <div class="search_form_suggest" style="display:none;"> <h3><a class="ico btn_close thRight" item="close">关闭</a>热门出发城市</h3> <dl class="search_hotList"> <dd class="clr_after"> <a href="#">北京</a> <a href="#">上海</a> <a href="#">广州</a> <a href="#">成都</a> <a href="#">杭州</a> <a href="#">南京</a> <a href="#">深圳</a> <a href="#">济南</a> <a href="#">石家庄</a> <a href="#">武汉</a> <a href="#">郑州</a> <a href="#">重庆</a> <a href="#">福州</a> <a href="#">西安</a> <a href="#">长沙</a> <a href="#">沈阳</a> <a href="#">天津</a> <a href="#">哈尔滨</a> <a href="#">苏州</a> <a href="#">南宁</a> </dd> </dl> <div class="clear"></div> </div> </li> <li> <div class="thRelative lineSearchbg"> <em class="thLeft ico ico_serGray"></em> <input class="thLeft" name="textfield2" type="text" id="arriveSearchText" value="请输入目的地、主题或关键词" /> <a class="ico btn_close thLeft" item="close" style="margin:8px 8px 0 0;" id="btn_delete" >删除</a> <a class="ico btn_search" item="commit" href="javascript:void(0)">搜 索</a> </div> </li> </ul> </div> </body> </html>JS代码
$(function(){ $.fn.hhDrop = function(options){ var options = jQuery.extend({ preLoadSrc:"images/loading.gif" }, options || {}); var defaults = {}; return this.each(function(){ //默认 var options = $.extend(defaults,options); var $this = $(this); var $boxSearch = $this.find('.boxSearch'); var $lineSearchbg = $this.nextAll().find('.lineSearchbg'); //出发城市 到达城市 $boxSearch.click(function(){ var _this = $(this); //点击本身显示隐藏 if(_this.hasClass('boxSearchHover') ){ _this.removeClass('boxSearchHover'); _this.children('.btn_search').removeClass('btn_search_current'); _this.parent().find('.search_form_suggest').hide(); }else{ _this.addClass('boxSearchHover'); _this.children('.btn_search').addClass('btn_search_current'); _this.parent().find('.search_form_suggest').show(); } _this.next().find('.clr_after a').click(function(){ _this.find('span.key_word b').text($(this).text()); }); _this.next().find('.search_city_result a').click(function(){ _this.find('span.key_word b').text($(this).text()); }); //阻止冒泡 $(document).bind('click',function(event){ if(!$(event.target).parent().hasClass('boxSearch' ) && !$(event.target).hasClass('boxSearch') && !$(event.target).parent().parent().hasClass('boxSearch') && !$(event.target).hasClass('input_city') ){ _this.children('.btn_search').removeClass('btn_search_current'); _this.removeClass('boxSearchHover'); _this.parent().find('.search_form_suggest').hide(); } }); }); $lineSearchbg.each(function(){ //搜索框 请输入目的地、主题或关键词 $(this).find('#arriveSearchText').focus(function(){ var arrive = $(this).val(); if(arrive == '请输入目的地、主题或关键词'){ $(this).val('').css('color','#000'); } }); $(this).find('#arriveSearchText').blur(function(){ var arrive = $(this).val(); if(arrive == ''){ $(this).val('请输入目的地、主题或关键词').css('color','#b5b5b5'); } }); //删除搜索信息 $(this).find('#btn_delete').click(function(){ $(this).prev('#arriveSearchText').focus().val('').css('color','#000'); }); }); }); } });全部本地做好的了，可就是按钮没反应，是不是还需要改些什么啊?看过JS了，可里面没有提交搜索链接地址的地方啊
解决方案
人家只是写了一个效果，美化select，其他搜索什么的，你要自己写代码
这个插件不怎么样。。连提供获取选中了哪个城市的API接口都没有，至少也要提供hidden对象的赋值什么的，可以直接提交表单就行，现在是需要自己操作dom来获取相关的数据
<a class="ico btn_search" item="commit" href="javascript:void(0)" id="btnSearch">搜 索</a>
<script>
$('#btnSearch').click(function () {
var from = $('#hhDrop00').find('span.key_word b').text(),
to = $('#hhDrop01').find('span.key_word b').text(),
kw = $('#arriveSearchText').val();
alert('出发城市：' + from + 'n到达城市：' + to + 'n 关键字：' + kw);
//自己用ajax发送from/to/kw到你的动态页获取相关数据进行显示什么的
});
</script>
解决方案二：
没有搜索代码逻辑怎么可能能查询呢？
这种
<a class="ico btn_search" item="commit" href="javascript:void(0)">
的写法叫做“低调的Javascript”（我不知道是不是这么翻译的，我说的是Unobtrusive Javascript），换一句话说，程序的某处应该有代码去给这些标记附着js代码。
解决方案三：
是不是因为使用的是 Google 的接口，但 Google 已经被河蟹了。
解决方案四：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
改为
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
试试，谷歌资源被gfw干掉了，加载不了的，换另外一个资源地址
解决方案五：
应该是链接不到的原因；
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
解决方案六：
建议把Google的接口，改为百度或者360的
解决方案七：
这里根本没有绑定事件，把hhDrop.js代码贴出来看一下
<a class="ico btn_search" item="commit" href="javascript:void(0)">搜 索</a>
时间： 2024-04-20 04:03:30