Question

我缺乏知识使我在这里。我终于找到了如何交换图像的方法。

＆＃13;

@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); 
}

＆＃13;

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);
});

＆＃13;

但是我想在点击另一张图片后更改图像。只是在列表中只有一个已更改的图像。

我真的卡住了，我该怎么办？

Answer 1

好的，我现在为你解决了这个问题。

首先你需要修复你的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>

Answer 2

像这样？

$(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"];
        }
    });
});

区域扩展时更改图像

2 个答案: