[英]Change Icon on click and add a css class through javascript
我正在尝试制作可扩展的H3。 为此,我需要单击“加号”图像,单击时必须更改为“减号”图像,我需要在h3中添加css类以显示内容。 我将粘贴以下所有代码:
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br /> [Posts] [Pager]
</div>
<div style="clear: both"></div>
这是javascript:
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
element.src = element.bln ? right : left;
element.bln = !element.bln;
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
您可以使用jquery的.attr函数来设置图像源,例如
$('.img-selector').attr('src','plusorminusimagepath.jpg');
您可以使用布尔标志来知道它是更少还是更多
在这里,我正在单击更改图像标签的alt
属性。 用相同的方法可以更改src
jQuery(document).ready(function() { $("#ExpandBlogDescriptionImg").click(function() { if ($(this).attr("alt") == "+") { $(this).attr("alt", "-"); } else { $(this).attr("alt", "+"); } }); var img = $("#ExpandBlogDescriptionImg"); if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") { $('.blogdescription').addClass("ExpandBlogDescriptionText"); } else { $('.blogdescription').removeClass("ExpandBlogDescriptionText"); }; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="default"> [ManageBlog] <div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none"> </div> <div class="head"> <h1 class="blogname"> [BlogName] <img alt="+" src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds] <br style="line-height: 12px; clear: both" /> <h3 class="blogdescription"> [BlogDescription]</h3> [Author] </div> <br />[Posts] [Pager] </div> <div style="clear: both"></div>
$("#ExpandBlogDescriptionImg").click( function(e){
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
if($(e.currentTarget).attr('img') == left){
$(this).hide();
$(e.currentTarget).attr('img',right);
}else{
$(this).show();
$(e.currentTarget).attr('img',left);
}
});
您应该使用Sprite图片和CSS,否则当您单击它将加载另一个图片时,图片之间的一段时间会消失。
的HTML
<div class="head">
<h1 class="blogname">
[BlogName] <span class="plus icon"></span></h1>
[RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3>
[Author]</div>
<br />
的CSS
.icon{
width:30px;
height:30px;
display:inline-block;
background-image:url(plus-minus-sprite-image.png);
}
.icon.plus{
background-position:20px center;
}
.icon.minus{
background-position:40px center;
}
JS
$('.icon').click(function(){
$(this).toggleClass("plus minus");
if($(this).hasClass("plus")){
$('.blogdescription').addClass("ExpandBlogDescriptionText");
}else{
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
}
// Or $('.blogdescription').toggleClass("ExpandBlogDescriptionText");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.