jQuery的傳遞參數失敗 - 的作品，而不傳遞參數

Question

我不能得到這個jQuery函數與傳遞的div id作爲一個參數，而不是實際輸入的腳本里面的DIV ID（如果我沒有這樣的說法，然後我需要一個工作每個div的腳本）。任何想法爲什麼這不起作用？我對jQuery比較陌生。調試器說「的ReferenceError：找不到變量：家」

懸停在藍色的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>

希望這有助於！ :)