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

时间：2017-08-08 21:40:22

标签： jquery

我无法使用这个jQuery函数将div id作为参数传递，而不是在实际脚本中键入div id（如果我这样做，那么我需要每个div的脚本）。任何想法为什么这不起作用？我对jQuery比较陌生。调试器显示'ReferenceError：找不到变量：home'

将鼠标悬停在蓝色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>

2 个答案:

答案 0 :(得分：1)

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

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

希望这有帮助！ ：）

答案 1 :(得分：1)

不是传递ID，而是传递this，因为ID指向同一个元素。然后，您不需要再次按ID搜索。

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

function hoverAwayFromWindows(div) {
    $(div).removeClass('hover-over-windows-style');
};
＆＃13; 
.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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

您也可以使用jQuery .hover()方法：

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