仅在悬停元素内更改 类
only change classes inside a hovered element
所以我正在创建一个关于用户提交的食谱的页面。一些用户提交了关于食谱的简短报价,其他人则没有。我想让报价(如果存在)在用户将鼠标悬停在食谱图像上时显示。
现在,我正在使用这个:
$(".recipe").hover(function(){
$(".slider-submit").hide();
$(".slider-description").show();
},
function(){
$(".slider-submit").show();
$(".slider-description").hide();
});
第一个问题是所有食谱都会发生变化,而不仅仅是悬停的那个。第二个问题是,我不确定如何检查该食谱是否存在 'slider description'。
这是我正在处理的 fiddle。我还在学习 JQuery 所以请给我任何提示!
像这样更改您的 JS:
$(".recipe").hover(function(){
$(this).find(".slider-submit").hide();
$(this).find(".slider-description").show();
},
function(){
$(this).find(".slider-submit").show();
$(this).find(".slider-description").hide();
});
这样您将只定位属于悬停元素的滑块,而不是定位所有滑块。
诀窍是使用随悬停事件传入的 this
来查找其中的元素。
$(".recipe").hover(function() {
$(this).find(".slider-submit").hide();
$(this).find(".slider-description").show();
},
function() {
$(this).find(".slider-submit").show();
$(this).find(".slider-description").hide();
});
.recipe {
position: relative;
display: inline-block;
white-space: nowrap;
overflow-y: hidden;
font-family: 'Nunito', sans-serif;
font-weight: 600;
text-align: center
}
.slider-text {
position: absolute;
bottom: 0;
width: 200px;
padding: 0% 3% 3% 3%;
color: white;
white-space: normal;
background: rgba(0, 0, 0, 0.45);
overflow: hidden;
z-index: 100;
margin-left: 3px;
}
.slider-text:not(.asparagus-slider) {
padding: 6% 3% 3% 3%;
}
.slider-text>h3 {
font-size: 15px;
}
#asparagus {
font-size: 14px;
padding: 0% 3% 3% 3%;
}
.slider-info {
padding-bottom: 30px;
}
.slider-description {
display: none;
}
#chili-img,
#asparagus-img,
#macCheese-img,
#noBakePie-img {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 recipe">
<div class="slider-text">
<h3>Bear Creek Chili</h3>
<p class="slider-submit">
Submitted by: Dottie User
</p>
</div>
<img id="chili-img" src="http://mystateoffitness.com/wp-content/uploads/2016/07/big-game-chili.jpg">
</div>
<div class="col-md-3 recipe">
<div class="slider-text asparagus-slider">
<h3 id="asparagus">Beer Battered Asparagus with Lemon Herb Dipping Sauce</h3>
<p class="slider-submit">
Submitted by: Chris User
</p>
<p class="slider-description">
<em>"This is the only way that I can enjoy asparagus"</em>
</p>
</div>
<img id="asparagus-img" src="http://food.fnr.sndimg.com/content/dam/images/food/fullset/2007/9/10/0/IP0211_Beer_Battered_Asparagus.jpg.rend.hgtvcom.616.462.jpeg">
</div>
<div class="col-md-3 recipe">
<div class="slider-text">
<h3>Mac n' Cheese</h3>
<p class="slider-submit">
Submitted by: Annette User
</p>
</div>
<img id="macCheese-img" src="https://images-gmi-pmc.edge-generalmills.com/c41ffe09-8520-4d29-9b4d-c1d63da3fae6.jpg">
</div>
<div class="col-md-3 recipe">
<div class="slider-text">
<h3>No Bake Peanut Butter Pie</h3>
<p class="slider-submit">
Submitted by: Shari User
</p>
<p class="slider-description">
<em>"This recipe makes enough for two pies - one for your guests and one just for you!"</em>
</p>
</div>
<img id="noBakePie-img" src="http://cdn2.tmbi.com/TOH/Images/Photos/37/300x300/exps17834_CCT1227369D54B.jpg">
</div>
</div>
</div>
这是一种检查不存在的描述以及使用更高效的悬停功能的解决方案:
$(".recipe").hover(function(){
if ($(".slider-description",this)[0]){
$(".slider-submit",this).toggle();
}
$(".slider-description",this).toggle();
});
它使用鲜为人知的 $(selector, context)
符号仅 select 悬停的 .recipe
元素中的文本元素。
为了阐述 Lixus,您面临的问题是在 jQuery 中,当您进行选择时,您选择的是 DOM 中的所有内容。你想做的是限制你的选择范围。
例如看下面的JS:
$(".slider-submit").hide(); // Global selection
$(this).find(".slider-submit").hide(); // Limit search to only descendants of "this"
在 jQuery 中,通常当您进入传递给 jQuery 对象的函数(如 "hover" 函数中的事件处理程序)时,this
上下文将是 DOM 元素而不是 jQuery 对象,因此用 jQuery 包装 this
将像正常情况一样为您提供 jQuery 对象。
我用这段代码更新了你的 JSFiddle。 https://jsfiddle.net/bkyn40f8/5/
所以我正在创建一个关于用户提交的食谱的页面。一些用户提交了关于食谱的简短报价,其他人则没有。我想让报价(如果存在)在用户将鼠标悬停在食谱图像上时显示。
现在,我正在使用这个:
$(".recipe").hover(function(){
$(".slider-submit").hide();
$(".slider-description").show();
},
function(){
$(".slider-submit").show();
$(".slider-description").hide();
});
第一个问题是所有食谱都会发生变化,而不仅仅是悬停的那个。第二个问题是,我不确定如何检查该食谱是否存在 'slider description'。
这是我正在处理的 fiddle。我还在学习 JQuery 所以请给我任何提示!
像这样更改您的 JS:
$(".recipe").hover(function(){
$(this).find(".slider-submit").hide();
$(this).find(".slider-description").show();
},
function(){
$(this).find(".slider-submit").show();
$(this).find(".slider-description").hide();
});
这样您将只定位属于悬停元素的滑块,而不是定位所有滑块。
诀窍是使用随悬停事件传入的 this
来查找其中的元素。
$(".recipe").hover(function() {
$(this).find(".slider-submit").hide();
$(this).find(".slider-description").show();
},
function() {
$(this).find(".slider-submit").show();
$(this).find(".slider-description").hide();
});
.recipe {
position: relative;
display: inline-block;
white-space: nowrap;
overflow-y: hidden;
font-family: 'Nunito', sans-serif;
font-weight: 600;
text-align: center
}
.slider-text {
position: absolute;
bottom: 0;
width: 200px;
padding: 0% 3% 3% 3%;
color: white;
white-space: normal;
background: rgba(0, 0, 0, 0.45);
overflow: hidden;
z-index: 100;
margin-left: 3px;
}
.slider-text:not(.asparagus-slider) {
padding: 6% 3% 3% 3%;
}
.slider-text>h3 {
font-size: 15px;
}
#asparagus {
font-size: 14px;
padding: 0% 3% 3% 3%;
}
.slider-info {
padding-bottom: 30px;
}
.slider-description {
display: none;
}
#chili-img,
#asparagus-img,
#macCheese-img,
#noBakePie-img {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 recipe">
<div class="slider-text">
<h3>Bear Creek Chili</h3>
<p class="slider-submit">
Submitted by: Dottie User
</p>
</div>
<img id="chili-img" src="http://mystateoffitness.com/wp-content/uploads/2016/07/big-game-chili.jpg">
</div>
<div class="col-md-3 recipe">
<div class="slider-text asparagus-slider">
<h3 id="asparagus">Beer Battered Asparagus with Lemon Herb Dipping Sauce</h3>
<p class="slider-submit">
Submitted by: Chris User
</p>
<p class="slider-description">
<em>"This is the only way that I can enjoy asparagus"</em>
</p>
</div>
<img id="asparagus-img" src="http://food.fnr.sndimg.com/content/dam/images/food/fullset/2007/9/10/0/IP0211_Beer_Battered_Asparagus.jpg.rend.hgtvcom.616.462.jpeg">
</div>
<div class="col-md-3 recipe">
<div class="slider-text">
<h3>Mac n' Cheese</h3>
<p class="slider-submit">
Submitted by: Annette User
</p>
</div>
<img id="macCheese-img" src="https://images-gmi-pmc.edge-generalmills.com/c41ffe09-8520-4d29-9b4d-c1d63da3fae6.jpg">
</div>
<div class="col-md-3 recipe">
<div class="slider-text">
<h3>No Bake Peanut Butter Pie</h3>
<p class="slider-submit">
Submitted by: Shari User
</p>
<p class="slider-description">
<em>"This recipe makes enough for two pies - one for your guests and one just for you!"</em>
</p>
</div>
<img id="noBakePie-img" src="http://cdn2.tmbi.com/TOH/Images/Photos/37/300x300/exps17834_CCT1227369D54B.jpg">
</div>
</div>
</div>
这是一种检查不存在的描述以及使用更高效的悬停功能的解决方案:
$(".recipe").hover(function(){
if ($(".slider-description",this)[0]){
$(".slider-submit",this).toggle();
}
$(".slider-description",this).toggle();
});
它使用鲜为人知的 $(selector, context)
符号仅 select 悬停的 .recipe
元素中的文本元素。
为了阐述 Lixus,您面临的问题是在 jQuery 中,当您进行选择时,您选择的是 DOM 中的所有内容。你想做的是限制你的选择范围。
例如看下面的JS:
$(".slider-submit").hide(); // Global selection
$(this).find(".slider-submit").hide(); // Limit search to only descendants of "this"
在 jQuery 中,通常当您进入传递给 jQuery 对象的函数(如 "hover" 函数中的事件处理程序)时,this
上下文将是 DOM 元素而不是 jQuery 对象,因此用 jQuery 包装 this
将像正常情况一样为您提供 jQuery 对象。
我用这段代码更新了你的 JSFiddle。 https://jsfiddle.net/bkyn40f8/5/