单击更改图标并通过javascript添加一个css类

Change Icon on click and add a css class through javascript

本文关键字：一个 css 添加 javascript 图标 单击      更新时间：2023-09-26

我正在尝试制作一个可扩展的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>

您应该使用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");
});

$("#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);
    }
});
相关文章：