jQuery 传递参数失败 - 无需传递参数即可工作

Question

我无法让这个jQuery函数将div id作为参数传递，而不是在实际脚本中键入div id(如果我这样做，那么我将需要为每个div创建一个脚本(。任何想法为什么这不起作用？我对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>

Answer 1

不要传递 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');
});

Answer 2

问题很简单;引号使用不正确。

首先，您需要将函数参数包装在引号内。您正在寻找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>

希望这有帮助！ :)