如何通过单击jquery将一个图像更改为另一个图像

时间:2018-06-05 16:46:40

标签: javascript jquery css

目前,我可以show/hide使用slideToggle()方法$(document).ready(function() { $(".txtEachCaracteristica").css('display', 'none'); $(".txtTituCaracteristica, .arrowBlack").click(function(ev) { $(this).next(".txtEachCaracteristica").slideToggle('slow'); }); });我想要的文字。

现在我一直在尝试点击时,我也可以在每次点击时更改另一张图片。

body {
  font-family: 'Montserrat', sans-serif;
}

.txtTituCaracteristica {
  line-height: 2;
  font-weight: 600;
  font-size: 15pt;
}

.icon-more {
  height: 18px;
}

p {
  display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<br />

<div id="titu1" class="txtTituCaracteristica">
  <p>Living</p> <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png" />
</div>

<div id="txt1" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>

<div id="titu2" class="txtTituCaracteristica">Hab <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png" /></div>
<div id="txt2" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>
<img class="icon-more" src="https://png.icons8.com/ios-glyphs/1600/minus-math.png" />
class ViewController: UIViewController, UITextFieldDelegate {

@IBOutlet weak var priceTextField: UITextField!
@IBOutlet weak var payoutTextField: UITextField!
@IBOutlet weak var leasingPeriodTextField: UITextField!
@IBOutlet weak var priceLabel: UILabel!
@IBOutlet weak var payoutLabel: UILabel!

var amt: Int = 0

override func viewDidLoad() {
    super.viewDidLoad()

    priceTextField.delegate = self

    priceTextField.delegate = self

    priceTextField.placeholder = updateAmount()
}


func priceTextFieldShouldReturn(_ priceTextField: UITextField) -> Bool {
     self.view.endEditing(true)
     return true
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

3 个答案:

答案 0 :(得分:2)

假设&#39;图像&#39;你的意思是加号/减号图标,然后通过在点击的元素上切换一个CSS类来修改它们会容易得多,这个元素在子:after的{​​{1}}伪元素中定义它们,就像这样:

&#13;
&#13;
span
&#13;
$(".txtTituCaracteristica").click(function(ev) {
  $(this).toggleClass('open').next(".txtEachCaracteristica").slideToggle('slow');
});
&#13;
body {
  font-family: 'Montserrat', sans-serif;
}

.txtTituCaracteristica {
  line-height: 2;
  font-weight: 600;
  font-size: 15pt;
}

.txtTituCaracteristica span {
  position: relative;
}

.txtTituCaracteristica span:after {
  content: '';
  position: absolute;
  background-image: url('https://png.icons8.com/metro/1600/plus-math.png');
  background-size: cover;
  height: 18px;
  width: 18px;
  top: 3px;
  right: -25px;
}
.txtTituCaracteristica.open span:after {
  background-image: url('https://png.icons8.com/metro/1600/minus-math.png');
}

.txtEachCaracteristica {
  display: none;
}

.icon-more {
  height: 18px;
}

p {
  display: inline;
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我假设您想要更改的图像是正/负图标......

诀窍是检查src属性值并将其更改为另一个。

&#13;
&#13;
$(document).ready(function() {
    $(".txtEachCaracteristica").css('display', 'none');

    $(".txtTituCaracteristica, .arrowBlack").click(function(ev) {
      $(this).next(".txtEachCaracteristica").slideToggle('slow');
      
      // Change the icon
      var icon = $(this).find(".icon-more");
      if(icon.attr("src")=="https://png.icons8.com/ios-glyphs/1600/minus-math.png"){
        icon.attr("src","https://png.icons8.com/metro/1600/plus-math.png");
      }else{
        icon.attr("src","https://png.icons8.com/ios-glyphs/1600/minus-math.png");
      }
    });
});
&#13;
body {
  
  font-family: 'Montserrat', sans-serif;
}
.txtTituCaracteristica {line-height: 2; font-weight: 600;font-size: 15pt;}

.icon-more{height: 18px;}
p {display: inline;}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">




<br />

<div id="titu1" class="txtTituCaracteristica">
   <p>Living</p> <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png"/>
</div>

<div id="txt1" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>

<div id="titu2" class="txtTituCaracteristica">Hab <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png"/></div>
<div id="txt2" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br> 
<img class="icon-more" src="https://png.icons8.com/ios-glyphs/1600/minus-math.png"/>
&#13;
&#13;
&#13;

答案 2 :(得分:-1)

将以下代码添加到您的点击功能中:

 let image = $(this).find('img')
 image.attr('src','https://png.icons8.com/ios-glyphs/1600/minus-math.png"/') 

$(document).ready(function() {
    $(".txtEachCaracteristica").css('display', 'none');

    $(".txtTituCaracteristica, .arrowBlack").click(function(ev) {
      $(this).next(".txtEachCaracteristica").slideToggle('slow');
     let expanded = $(this).attr("aria-expanded") === 'true'
     let imgSrc = expanded == true ? 'https://png.icons8.com/metro/1600/plus-math.png"/' : 'https://png.icons8.com/ios-glyphs/1600/minus-math.png"/'
    
     let image = $(this).find('img')
     image.attr('src',imgSrc) 
      $(this).attr("aria-expanded", !expanded)
     
     })
     
});
body {
  
  font-family: 'Montserrat', sans-serif;
}
.txtTituCaracteristica {line-height: 2; font-weight: 600;font-size: 15pt;}

.icon-more{height: 18px;}
p {display: inline;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">




<br />

<div id="titu1" class="txtTituCaracteristica" aria-expanded='false'>
   <p>Living</p> <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png"/>
</div>

<div id="txt1" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br>

<div id="titu2" class="txtTituCaracteristica">Hab <img class="icon-more" src="https://png.icons8.com/metro/1600/plus-math.png"/></div>
<div id="txt2" class="txtEachCaracteristica">Lorem ipsum dolor sit armet, consectetur adipiscing elit.</div>
<br> 
<img class="icon-more" src="https://png.icons8.com/ios-glyphs/1600/minus-math.png"/>

UPD:刚刚将aria-expanded attr添加到html元素和一些逻辑以切换图标