鸿硕今天开发导航菜单功能时,遇到了一个问题,以前写jquery时,总是使用click或hover来触发,比如:
$(function(){$('.gou').click(function(){alert('hello world');})})
今天写的功能不需要触发,只是条件判断,就需要添加样式,例如:
<section class="container bd1"><div><ul class="row"><li class="col-3"><a>one</a></li><li class="col-3"><a>two</a><ul class="sub-menu"><li>1</li><li>2</li><li>3</li></ul></li><li class="col-3"><a>three</a></li><li class="col-3"><a>four</a><ul class="sub-menu"><li>1</li><li>2</li><li>3</li></ul></li></ul></div></section>
给含有子菜单.nav-menu的<li>元素下面的a元素后面添加图标<i>
如果常用的方法条件判断来实现,代码如下:
$(function() {if ($('.row>li .sub-menu').length > 0) {$(this).siblings('a').after('<i class="fa fa-plus fa"></i>');}});
上面的代码,鸿硕亲测不能成功,如果函数内定义变量,则可以实现,代码如下:
$(function() {if ($('.row>li .sub-menu').length > 0) {var gou = $('.row>li .sub-menu');gou.siblings('a').after('<i class="fa fa-plus fa"></i>');}});
这里需要注意一点:函数内定义的变量必须和if条件语句里面的选择的元素一致,否则无法实现效果(也就是变量 gou必须和$()括号内的元素保持一致,即上述代码紫色代码必须一致)。
就此处代码实现的功能来看,其实完全也可以不要函数,直接写代码即可,如下:
var gou = $('.row>li .sub-menu');gou.siblings('a').after('<i class="fa fa-plus fa"></i>');
其实这个代码也暗含了条件判断,如果var gou的值为真,也就有了下一行的代码,如果var gou的值为假,就没有了下一行的代码的存在了。当然具体代码的时候还需要根据具体的情况来调整。
总结:如果不使用click或hover来触发,而对元素进行操作,如果使用条件语句来判断,函数内不可以使用$(this),但可以函数内定义变量且变量选择的元素必须和条件判断是选择的元素完全一致。