jQuery的传递参数失败 - 的作品，而不传递参数

问题描述：

我不能得到这个jQuery函数与传递的div id作为一个参数，而不是实际输入的脚本里面的DIV ID（如果我没有这样的说法，然后我需要一个工作每个div的脚本）。任何想法为什么这不起作用？我对jQuery比较陌生。调试器说“的ReferenceError：找不到变量：家”jQuery的传递参数失败 - 的作品，而不传递参数

悬停在蓝色的div应适用另一CSS样式类和转DIV红色。

感谢任何帮助，谢谢。

function hoverOverWindows(div) { 
 
    var id = "#" + div; 
 
    $('id').addClass('hover-over-windows-style'); 
 
}; 
 

 
function hoverAwayFromWindows(div) { 
 
    var id = "#" + div; 
 
    $('#div').removeClass('hover-over-windows-style'); 
 
};

.home-match-type { 
 
    width: 47%; 
 
    height: 300px; 
 
    margin-top: 50px; 
 
    float: left; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.home-match-type-left { margin-right: 3% } 
 

 

 
.img-text-container { 
 
    width: auto; 
 
    height: auto; 
 
    bottom: 0; 
 
    position: absolute; 
 
    padding: 15px; 
 
    background: rgba(60, 122, 173, 0.95); 
 
} 
 

 
.img-text-container-type-2 { background: rgba(60, 122, 173, 0.95) } 
 

 
.img-text { 
 
    text-align: left; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
h3.img-text.img-header { float: left } 
 

 
h3.img-text.img-header.be-central { float: none } 
 

 
.img-header { 
 
    padding-bottom: 5px; 
 
    text-transform: uppercase; 
 
    border-bottom: 1px solid rgba(213, 213, 213, 0.3); 
 
} 
 

 
.hover-over-windows-style { 
 
    background: red; 
 
    height: 100%; 
 
}

<link href="assets/css/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 
<article class="home-match-type home-match-type-left"> 
 
      <div class="img-text-container img-text-container-type-2" id="home-m-t-1" onmouseover="hoverOverWindows(home-m-t-1)" onmouseout="hoverAwayFromWindows(home-m-t-1)"> 
 
       <h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Some Text</a></h3> 
 
       <p class="img-text text-align-centre windows-type-2">lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer </p> 
 
      </div> 
 
     </article>

你的头脑，包括你的JavaScript的一部分，你使用的是可变的 '家'？我想看看你分配给'家'以及那个变量正在做什么。 –

$（'id'）'应该是'$（id）'。引号阻止扩展变量。 – Barmar

不应该在引号内的div ID？ – simlev

答

相反传递ID的，只是通过this，由于ID指向相同的元件。然后你不需要再次通过ID搜索。

function hoverOverWindows(div) { 
 
    $(div).addClass('hover-over-windows-style'); 
 
}; 
 

 
function hoverAwayFromWindows(div) { 
 
    $(div).removeClass('hover-over-windows-style'); 
 
};

.home-match-type { 
 
    width: 47%; 
 
    height: 300px; 
 
    margin-top: 50px; 
 
    float: left; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.home-match-type-left { margin-right: 3% } 
 

 

 
.img-text-container { 
 
    width: auto; 
 
    height: auto; 
 
    bottom: 0; 
 
    position: absolute; 
 
    padding: 15px; 
 
    background: rgba(60, 122, 173, 0.95); 
 
} 
 

 
.img-text-container-type-2 { background: rgba(60, 122, 173, 0.95) } 
 

 
.img-text { 
 
    text-align: left; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
h3.img-text.img-header { float: left } 
 

 
h3.img-text.img-header.be-central { float: none } 
 

 
.img-header { 
 
    padding-bottom: 5px; 
 
    text-transform: uppercase; 
 
    border-bottom: 1px solid rgba(213, 213, 213, 0.3); 
 
} 
 

 
.hover-over-windows-style { 
 
    background: red; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="assets/css/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 
<article class="home-match-type home-match-type-left"> 
 
      <div class="img-text-container img-text-container-type-2" id="home-m-t-1" onmouseover="hoverOverWindows(this)" onmouseout="hoverAwayFromWindows(this)"> 
 
       <h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Some Text</a></h3> 
 
       <p class="img-text text-align-centre windows-type-2">lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer </p> 
 
      </div> 
 
     </article>

你也可以只使用jQuery的.hover()方法：

$("#home-m-t-1").hover(function() { 
    $(this).addClass('hover-over-windows-style'); 
}, function() { 
    $(this).removeClass('hover-over-windows-style'); 
});

没想到要做到这一点，完美，谢谢！ – user3760941

答

的问题是一个简单的一个;错误使用引号。

首先，你需要用引号中的功能参数。您正在寻找onmouseover="hoverOverWindows('home-m-t-1')"而不是
onmouseover="hoverOverWindows(home-m-t-1)"。

二，你不要需要在jQuery元素目标中加引号。您正在寻找$(id)而不是$('id')那里。您还需要删除该课程，以便将$(id)作为目标，而不是$('#div')。

您还需要引用jQuery的，这是不包含在您的片段。

我在下面的代码片段更新了这些：

function hoverOverWindows(div) { 
 
    var id = "#" + div; 
 
    $(id).addClass('hover-over-windows-style'); 
 
}; 
 

 
function hoverAwayFromWindows(div) { 
 
    var id = "#" + div; 
 
    $(id).removeClass('hover-over-windows-style'); 
 
};

.home-match-type { 
 
    width: 47%; 
 
    height: 300px; 
 
    margin-top: 50px; 
 
    float: left; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.home-match-type-left { 
 
    margin-right: 3% 
 
} 
 

 
.img-text-container { 
 
    width: auto; 
 
    height: auto; 
 
    bottom: 0; 
 
    position: absolute; 
 
    padding: 15px; 
 
    background: rgba(60, 122, 173, 0.95); 
 
} 
 

 
.img-text-container-type-2 { 
 
    background: rgba(60, 122, 173, 0.95) 
 
} 
 

 
.img-text { 
 
    text-align: left; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
h3.img-text.img-header { 
 
    float: left 
 
} 
 

 
h3.img-text.img-header.be-central { 
 
    float: none 
 
} 
 

 
.img-header { 
 
    padding-bottom: 5px; 
 
    text-transform: uppercase; 
 
    border-bottom: 1px solid rgba(213, 213, 213, 0.3); 
 
} 
 

 
.hover-over-windows-style { 
 
    background: red; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link href="assets/css/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 
<article class="home-match-type home-match-type-left"> 
 
    <div class="img-text-container img-text-container-type-2" id="home-m-t-1" onmouseover="hoverOverWindows('home-m-t-1')" onmouseout="hoverAwayFromWindows('home-m-t-1')"> 
 
    <h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Some Text</a></h3> 
 
    <p class="img-text text-align-centre windows-type-2">lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer lorem ipsum sid etc whaetveer </p> 
 
    </div> 
 
</article>

希望这有助于！ :)

还需要删除'$（'id'）中的引号' – Barmar

@Barmar - 是的，很好的发现！起初并没有看到一个:) –

和'$（'＃DIV“）'也应该是'$（ID）' – Barmar

jQuery的传递参数失败 - 的作品，而不传递参数

相关推荐