为什么还是能跳转
来源：3-1 改写搜索框功能--搜索验证
慕勒2048820
2019-04-20 16:02:21
(function ($) {
'use strict'
function Search($elem, options) {
this.$elem = $elem;
this.options = options;
this.$form = this.$elem.find('.search-form');
this.$input = this.$elem.find('.search-inputbox');
this.$layer = this.$elem.find('.search-layer');
$elem.on('click', '.search-layer-item', $.proxy(this.submit, this))
}
Search.DEFAULT = {
autocomplete: false,
url:'',
css3: false,
js: false,
animation: 'fade'
}
Search.prototype.submit = function() {
console.log('zaizheli')
if ($.trim(this.$input.val()) === '') {
return false;
}
// this.$form.submit()
}
Search.prototype.getData = function() {
}
Search.prototype.showLayer = function() {
}
Search.prototype.hideLayer = function() {
}
Search.prototype.getInputVal = function() {
}
Search.prototype.setInputVal = function() {
}
Search.prototype.appendLayer = function() {
}
$.fn.extend({
search: function() {
return this.each(function(option) {
var $this = $(this),
options = $.extend({}, Search.DEFAULT, typeof option === 'object' && option),
mode = $this.data('search');
//如果是第一次执行就调用否则禁止调用
if (!mode) {
$this.data('search', mode = new Search($this, options))
}
//判断是否有此方法
if (mode[option] === 'function') {
mode[option]()
}
})
}
})
})(jQuery)<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!-- 站点导航开始 -->
<nav class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
<!-- <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
<li><a href="###" target="_blank" class="menu-item">体验中心</a></li> -->
</ul>
</li>
<li class="nav-site-service menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- 站点导航结束 -->
<!-- header区开始 -->
<div class="header">
<div class="container ">
<h1 class=" fl"><a href="./index.html" class="hearder-logo text-indent">hh</a></h1>
<div id="header-search" class="search fl">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" placeholder="fsfh" name="q" autocomplete="off" class="search-inputbox fl">
<input type="submit" value="搜索" class="search-btn fl">
</form>
<ul class="search-layer">
<!-- <li class="search-layer-item text-ellipsis">11</li>
<li class="search-layer-item text-ellipsis">11</li>
<li class="search-layer-item text-ellipsis">11</li> -->
</ul>
</div>
<div class="cart"></div>
</div>
</div>
<!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
<!-- -->
<script>
//两种判断是否有jquery库的写法：
// window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>
<script src="js/transition.js"></script>
<script src="js/showhide.js"></script>
<script src="js/dropdown.js"></script>
<!-- <script src="js/search.js"></script>
<script src="js/index.js"></script> -->
<script src="js/test.js"></script>
<!-- <style type="text/css">
.header .cart{
margin-right: 500px;
}
</style> -->
</body>
</html>写回答
4回答
-
慕勒2048820
提问者
2019-04-20
以找到问题，已解决
0h019-04-20 -
慕勒2048820
提问者
2019-04-20
知道问题在哪了，已经解决
0 -
慕勒2048820
提问者
2019-04-20
(function ($) { 'use strict' function Search($elem, options) { this.$elem = $elem; this.options = options; this.$form = this.$elem.find('.search-form'); this.$input = this.$elem.find('.search-inputbox'); this.$layer = this.$elem.find('.search-layer'); this.$elem.on('click', '.search-btn', $.proxy(this.submit, this)); } Search.DEFAULT = { autocomplete: false, url:'', css3: false, js: false, animation: 'fade' } Search.prototype.submit = function() { if ($.trim(this.$input.val()) === '') { return false; } this.$form.submit(); } Search.prototype.getData = function() { } Search.prototype.showLayer = function() { } Search.prototype.hideLayer = function() { } Search.prototype.getInputVal = function() { } Search.prototype.setInputVal = function() { } Search.prototype.appendLayer = function() { } $.fn.extend({ search: function() { return this.each(function(option) { var $this = $(this), options = $.extend({}, Search.DEFAULT, typeof option === 'object' && option), mode = $this.data('search'); //如果是第一次执行就调用否则禁止调用 if (!mode) { $this.data('search', mode = new Search($this, options)) } //判断是否有此方法 if (mode[option] === 'function') { mode[option]() } }) } }) })(jQuery)0 -
慕勒2048820
提问者
2019-04-20
把。search-layer-item改成了search-btn也还是不行
0
相似问题