我缺乏知识使我在这里。我终于找到了如何交换图像的方法。
@Override
public int getCount() {
int size = movieItems.size()/2;
return size ==0 ? size : size +1;// +1 for odd number of items like 3 or 5 or 7 ..so on.
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
//And also you have handle the odd Items case.Better add extra null at the end if you have odd number of items
if(position != 0){
position = 2 * position;
}
Movie m1 = movieItems.get(position);
Movie m2 = movieItems.get(position+1);
thumbNail.setImageUrl(m.getThumbnailUrl(), imageLoader);
thumbNail2.setImageUrl(m.getThumbnailUrl(), imageLoader);
}
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
};
$(function () {
$('img').click(sourceSwap);
});
但是我想在点击另一张图片后更改图像。只是在列表中只有一个已更改的图像。
我真的卡住了，我该怎么办？
答案 0 :(得分：0)
好的，我现在为你解决了这个问题。
首先你需要修复你的html，有些标签是未公开的
对于每个图像，您将添加另一个数据元素 data-src将保存图像的原始源。 当此选项卡变为活动状态时，您将添加一个类＆＃34;活动＆＃34;到图像
当您单击新图像时，您会将src更改为所有活动图像上的data-src属性（这只是以前的活动元素）。
然后，您将活动类添加到您选择的类并更改源。 希望这能为你排序。祝你好运
<html>
<body>
<ul class="heads nav nav-tabs" role="tablist">
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz kis" role="tab" data-toggle="tab" href="#collapseKisela" aria-expanded="false" aria-controls="#collapseKisela" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="https://placehold.it/350x160" data-src="https://placehold.it/350x150" src="https://placehold.it/350x150" class="xyz img-responsive" alt="">
</div>
</div>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz kraus" role="tab" data-toggle="tab" href="#collapseKrausz" aria-expanded="false" aria-controls="#collapseKrausz" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="https://placehold.it/350x160" data-src="https://placehold.it/350x150" src="https://placehold.it/350x150" class="xyz img-responsive" alt="">
</div>
</div>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz" role="tab" data-toggle="tab" href="#collapseJancusko" aria-expanded="false" aria-controls="#collapseJancusko" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="https://placehold.it/350x160" data-src="https://placehold.it/350x150" src="https://placehold.it/350x150" name="" role="presentation" class="active img-responsive" alt="">
</div>
</div>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz" role="tab" data-toggle="tab" href="#collapseBerka" aria-expanded="false" aria-controls="#collapseKisela" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="https://placehold.it/350x160" data-src="https://placehold.it/350x150" src="https://placehold.it/350x150" name="" role="presentation" class="active img-responsive" alt="">
</div>
</div>
</a>
</li>
</ul>
<div class="row tab-content">
<div role="tabpanel" class="tab-pane fade" id="collapseBerka">
<div class="hlavy">
<h4>René Krausz</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque voluptates maiores magnam expedita inventore eaque alias mollitia voluptate corporis harum ut quod quaerat dolorem, illo fugit soluta impedit, maxime.</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseKrausz">
<div class="hlavy">
<h4>René Krausz</h4>
<h5>CEO</h5>
<p>Some text herer</p>
<p>Text</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseJancusko">
<div class="hlavy">
<h4>Lukáš Jancusko</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>Changing text</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseGrega">
<div class="hlavy">
<h4>Tomáš Grega</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>Another text</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseKisela">
<div class="hlavy">
<h4>Juraj Kisela</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>TEXT</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
var activeItem = $('.heads img.active');
var activeSource = activeItem.data('src');
activeItem.attr('src', activeSource).removeClass('active');
$this.addClass('active');
$this.attr('src', newSource);
};
$(function () {
$('.heads').on('click', 'img', sourceSwap);
});
</script>
</body>
</html>
答案 1 :(得分：0)
$(function () {
$('img').each(function(){
this.dataset['original-src'] = this.src
}).click(function () {
var current = this;
$('img').each(function(){
this.src = this.dataset[this === current? "alt-src": "original-src"];
})
});
});
或更多
$(function () {
var current;
$('img').each(function(){
this.dataset['original-src'] = this.src
}).click(function(){
if(current){
current.src = current.dataset["original-src"];
}
if(current = current === this? null: this){
current.src = current.dataset["alt-src"];
}
});
});