Javascript 包含this.indexof的If语句，以便为不工作的元素设置动画

我已经检查了许多其他涉及此类问题的问题，但没有一个有帮助。 我对这一点很陌生，因为我明显缺乏知识

我试图创建一个导航，一旦导航链接本身上的代码>鼠标器> /代码>，导航链将被动画化，通过代码> 5px上升，一个相同宽度的框将下落以在中间遇到它。我可以想出一种方法来做这件事，但它涉及的代码比使用if语句要多得多

<div id="header" class="wrapper">
    <div id="header_logo" class="header"></div> 
    <div id="header_main" class="header"> 
        <div id="nav_drop_btn">
            <div id="nav_drop_box">
                <span id="1" class="nav_drop"></span>
                <span id="2" class="nav_drop"></span>
                <span id="3" class="nav_drop"></span>
                <span id="4" class="nav_drop"></span>
            </div>
            <span class="nav_btn">Home</span>
            <span class="nav_btn">About</span>
            <span class="nav_btn">Contact</span>
            <span class="nav_btn">Portfolio</span>
        </div>

$(".nav_btn").mouseenter(function(){
    $(this).animate({height:"25px",bottom:"0px"},400);
    if (this.indexOf("home") >=-1){$("#1").animate({height:"50px"})};
});

家
关于
接触
文件夹
$（“.nav_btn”）.mouseenter（函数（）{
动画（{高度：“25px”，底部：“0px”}，400）；
如果（this.indexOf（“home”）>=-1）{$（“#1”）.animate（{height:“50px”}）；
});

.nav_btn

是所有导航链接的类<代码>主页是有问题的导航按钮

我很肯定我做的都是错的。所以，如果有人能帮助我理解if语句的错误，我将不胜感激。我其余的代码就是这样工作的

---

home

是

的
中的文本。导航id

，我试图区分哪个

。导航btn

已被单击，然后激活另一行代码，以动画显示相应的顶栏，顶栏向下与之相接，此顶部栏包含特定导航链接的图像

此

不表示字符串值。如果您正在查找一个要使用

indexOf

搜索的值，并且该值是一个链接，那么您可能需要使用

this.href.indexOf

<a href="/home/">Test</a>
<a href="/nothome/">Test 2</a>

$('a').mouseenter(function(){
    console.log(this.href.indexOf('/home'));
    if (this.href.indexOf('/home') !== -1) {
        console.log('Mouse enter home');    
    }
});

使用

SPAN

：

<span>Test</span>
<span>Other</span>

$('span').mouseenter(function(){
    console.log($(this).text().indexOf('Test'));
    if ($(this).text().indexOf('Test') !== -1) {
        console.log('Mouse enter home');    
    }
});

---

indexOf不是用于此操作的正确函数。您可以给home按钮一个特殊的类/id，以允许它在mouseenter上有不同的行为

$(".nav_btn").mouseenter(function(){
    $(this).animate({height:"25px",bottom:"0px"},400);
});

$("#home").mouseenter(function() { 
    $(this).animate({height:"50px"});
});

---

您的

indexOf

正在检查>=-1

这永远是事实-1是未找到搜索字符串时返回的值

也许您想检查：

if（this.indexOf（“home”）>-1）

---

相反？

这是因为我试图使它始终为真，以查看它是否会执行代码。不幸的是，它没有。谢谢你的评论。这不是一个链接，我试图找到的实际值“home”是.nav_btn中的文本。因为我有4个nav_btn，但它们实际上只是带有span的文本，其中包含class=“.nav_btn”。请参见使用

.text（）

的第二个示例。感谢您对我如此耐心，我放慢了atm的速度。我已将其更改回“！=”-1“我已添加了“.text”，并尝试使用您发布的示例。是的，谢谢你，最后一个街区很好用。我想是去了。非常感谢，你帮了大忙。在比较之前规范化字符串大小写通常非常有用，这样它就不依赖于值和搜索/比较的大小写。这是一个很好的习惯，只是要知道什么时候你不应该这么做（出于某种原因）。另一个被激活的元素是“#1”，home就是我在.nav_btn中搜索的文本，这样JS就可以知道要使用哪个顶部栏来满足哪个.nav_btn。你可以发布一些你用于此的html吗？它非常混乱，但这里是：

home About Contact Portfolio

抱歉。不小心寄得太早了

$(".nav_btn").mouseenter(function(){
    $(this).animate({height:"25px",bottom:"0px"},400);
    if ($(this).text().toLowerCase().indexOf("home") !== -1){
        $("#1").animate({height:"50px"});
    }
});

$(".nav_btn").mouseenter(function(){
    $(this).animate({height:"25px",bottom:"0px"},400);
});

$("#home").mouseenter(function() { 
    $(this).animate({height:"50px"});
});