下了一个搜索代码,可按钮没反应,怎么弄啊,大虾们
<!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)">搜&nbsp;&nbsp;索</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了,可里面没有提交搜索链接地址的地方啊

7个回答

人家只是写了一个效果,美化select,其他搜索什么的,你要自己写代码

这个插件不怎么样。。连提供获取选中了哪个城市的API接口都没有,至少也要提供hidden对象的赋值什么的,可以直接提交表单就行,现在是需要自己操作dom来获取相关的数据

          <a class="ico btn_search" item="commit" href="javascript:void(0)" id="btnSearch">搜&nbsp;&nbsp;索</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>
showbo
支付宝加好友偷能量挖 回复cdgtw: ....
大约 5 年之前 回复
cdgtw
未央境 非常感谢啊,搞了一个下午了。
大约 5 年之前 回复
cdgtw
未央境 不好意思,有个地方,是我搞错了。location='http://www.xxxx.com/detail/?from='+from+'&to='+to+'&kw='+kw这句我写成:location='http://www.xxxx.com/detail/?from='+hhDrop00+'&to='+hhDrop01+'&kw='+kw了
大约 5 年之前 回复
showbo
支付宝加好友偷能量挖 回复cdgtw: alert($('#hhDrop01').find('span.key_word b').text())这个是什么内容,看你发的代码是获取到LI对象去了。。而且直接传递了内容过去
大约 5 年之前 回复
cdgtw
未央境 kw = $('#arriveSearchText').val();有数据,但to = $('#hhDrop01').find('span.key_word b').text(),和from = $('#hhDrop00').find('span.key_word b').text(),没有数据过来。结构没改过的。
大约 5 年之前 回复
showbo
支付宝加好友偷能量挖 回复cdgtw: 你动过人家的结构了?我发的代码在你基础上测试过没有问题的,要注意调用text方法
大约 5 年之前 回复
cdgtw
未央境 回复cdgtw: 哦,终于响应了,原来是代码要放在下面。但还是有问题:"from=[object HTMLLIElement]&to=[object HTMLLIElement]&kw="传递过来的结果是这样的,貌似数据没传递成功呢?
大约 5 年之前 回复
showbo
支付宝加好友偷能量挖 回复cdgtw: 确认没有重复的id?而且你的代码要放到这个对象下面。否则就要放到$(function(){。。。中}) 。$(function(){alert($('[id="btnSearch"]').length);。。。原来的绑定代码,多加前面那句看是否是1,如果是0或者大于1说明id错了说明你id有问题或者id重复了});
大约 5 年之前 回复
cdgtw
未央境 加了id的了。<a class="ico btn_search" item="commit" href="javascript:void(0)" id="btnSearch">搜&nbsp;&nbsp;索</a>
大约 5 年之前 回复
showbo
支付宝加好友偷能量挖 回复cdgtw: 注意id选择器,不行你将事件绑定放到$(function(){。。。})中
大约 5 年之前 回复
cdgtw
未央境 貌似是事件没被响应
大约 5 年之前 回复
showbo
支付宝加好友偷能量挖 回复cdgtw: 你加了id没有。。?认真看我的代码
大约 5 年之前 回复
cdgtw
未央境 回复showbo: 改好了,可点击“搜索”按钮还是没反应呢?
大约 5 年之前 回复
showbo
支付宝加好友偷能量挖 注意$('#hhDrop00'),$('#hhDrop01'),$('#arriveSearchText')这2个id你改过的话要改正过来,这个选择器是依据你发的代码写的
大约 5 年之前 回复
showbo
支付宝加好友偷能量挖 回复cdgtw: alert('出发城市:' + from + '\n到达城市:' + to + '\n 关键字:' + kw);改成location='http://www.xxxx.com/detail/?from='+from+'&to='+to+'&kw='+kw就行了,直接跳转到这个查询页面去
大约 5 年之前 回复
cdgtw
未央境 网站是有的了,只是如何使用这个搜索插件,实现点击即可按照http://www.xxxx.com/detail/?from=undefined&to=undefined&kw=undefined个格式完成搜索就好了
大约 5 年之前 回复
cdgtw
未央境 http://www.xxxx.com/detail/?from=undefined&to=undefined&kw=undefined传递后是这样的链接。你帮我把这个JS写完,链接绑定在JS里嘛
大约 5 年之前 回复
showbo
支付宝加好友偷能量挖 回复cdgtw: 不会你自己多学下了,这个不但是客户端的问题了,服务器端的语言,如asp,asp.net,php,还有数据库操作都要会。
大约 5 年之前 回复
cdgtw
未央境 //自己用ajax发送from/to/kw到你的动态页获取相关数据进行显示什么的,这个怎么写啊,我是完全小白一个的,谢谢了
大约 5 年之前 回复

没有搜索代码逻辑怎么可能能查询呢?
这种

 <a class="ico btn_search" item="commit" href="javascript:void(0)">

的写法叫做“低调的Javascript”(我不知道是不是这么翻译的,我说的是Unobtrusive Javascript),换一句话说,程序的某处应该有代码去给这些标记附着js代码。

cdgtw
未央境 谷歌的JS我本地测试是有的了。【程序的某处应该有代码去给这些标记附着js代码。】我也是这么想的,可整个代码就这个样子的了。该如何完善呢?
大约 5 年之前 回复

是不是因为使用的是 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干掉了,加载不了的,换另外一个资源地址

showbo
支付宝加好友偷能量挖 回复cdgtw: 别人只是写效果,并没有提供搜索,那个搜索是要你自己来写,如提交表单,或者ajax另外取数据什么的,看我发的另外一个回复
大约 5 年之前 回复
cdgtw
未央境 谷歌的JS我本地测试是有的了。
大约 5 年之前 回复

应该是链接不到的原因;

 http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
cdgtw
未央境 这个JS已放到本地的了
大约 5 年之前 回复

建议把Google的接口,改为百度或者360的

cdgtw
未央境 hhDrop.js代码已贴出
大约 5 年之前 回复
cdgtw
未央境 这个JS已放到本地的了
大约 5 年之前 回复

这里根本没有绑定事件,把hhDrop.js代码贴出来看一下

 <a class="ico btn_search" item="commit" href="javascript:void(0)">搜&nbsp;&nbsp;索</a>
cdgtw
未央境 hhDrop.js代码已贴出
大约 5 年之前 回复
cdgtw
未央境 就是了啊。我也觉得是少了这个。但JS里面应该怎么写呢?
大约 5 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问