为什么我会在点击事件中获得兄弟姐妹的（下一张图片）alt值两次？

Question

我想对我糟糕的英语说抱歉

我目前正在与worldcup网站合作。

我的任务是创建一个js代码，向用户介绍体育场

我制作的HTML：

            <section id="CitiesStadium">
            <section class="cities col-md-4">
                <ul>
                    <li>Ekaterinburg</li>
                    <li>Kaliningrad</li>
                    <li>Kazan</li>
                    <li>Moscow</li>
                    <li>Nizhny Novgorod</li>
                    <li>Rostov-on-don<li>
                    <li>Saint Petersburg</li>
                    <li>Samara</li>
                    <li>Saransk</li>
                    <li>Sochi</li>
                </ul>
            </section>
            <section class="cityStadium">
                <h2>Stadiums</h2>
                <img class="rounded col-md-3" data-city="Moscow" alt="Luzhniki Stadium" title="Luzhniki Stadium,Moscow"src="too long">
                <img class="rounded col-md-3" data-city="Moscow"alt="Spartak Arena" title="Spartak Arena, Moscow" src="too long">
                <img class="rounded col-md-3" data-city="Saint Petersburg" alt="Saint Petersburg Stadium" title="Saint Petersburg Stadium, St petersburg" src="too long">
                <img class="rounded col-md-3" data-city="Sochi" alt="Fisht Stadium" title="Fisht Stadium, Sochi" src="too long">
                <img class="rounded col-md-3" data-city="Ekaterinburg" alt="Ekaterinburg Arena" title="Ekaterinburg Arena, Ekaterinburg" src="too long">
                <img class="rounded col-md-3" data-city="Kazan" alt="Kazan Arena" title="Kazan Arena, Kazan" src="too long">
                <img class="rounded col-md-3" data-city="Kaliningrad" alt="Kalinngrad Stadium" title="Kaliningrad Stadium, Kaliningrad" src="too long">
                <img class="rounded col-md-3" data-city="Nizhny Novgorod" alt="Nizhny Novgorod Stadium" title="Nizhny Novgorod Stadium, Nizhny Novgorod" src="too long">
                <img class="rounded col-md-3" data-city="Rostov-on-don" alt="Rostov Arena" title="Rostov Arena, Rostov-on-don" src="too long">
                <img class="rounded col-md-3" data-city="Samara" alt="Samara Arena" title="Samara Arena, Samara" src="too long">
                <img class="rounded col-md-3" data-city="Saransk" alt="Mordovia Arena" title="Mordovia Arena, Saransk" src="too long">
                <img class="rounded col-md-3" data-city="Volgograd" alt="Volgograd Stadium" title="Volgograd Stadium, Volgograd" src="too long">
            </section>
        </section>

JS档案：

(function($){
    $('section li').on('click',function(){
        var thisLi = $(this);
         getCityStadiumInfo(thisLi);
    }); 
}(jQuery))
 //some codes

function getCityStadiumInfo(list){
   var stadiumName;
   var listText = list.text();
   var informationRubric = $('<h2 class="stadiumName">'+listText+'</h2>');
   var stadiumDescription = $('<div class="stadiumDescription">');
   var stadiumCapacity = $('<span class="capacity">');

   $('section.cityStadium h2').text(listText).hide().fadeIn(600);
   var $stadiumImg = $('.cityStadium img');
   $stadiumImg.removeClass('col-md-3').addClass('col-md-9').addClass('invisible');
  $stadiumImg.each(function(){
    if($(this).data('city')==listText){
        $(this).removeClass('invisible').hide().fadeIn(600);
        if(listText == 'Moscow'){
            $('img[alt="Spartak Arena"]').addClass('invisible');
            $('section.cityStadium img[alt="Luzhniki Stadium"]').on('click',function(){
                $(this).fadeOut(200,function(){
                    $(this).addClass('invisible');

                    $('img[alt="Spartak Arena"]').removeClass('invisible').hide().fadeIn(200);//equivalent to $(this).next().removeClass()...;
                    stadiumName = $('img[alt="Spartak Arena"]').attr('alt');
                    console.log(stadiumName);
                });

            });

        }
    }
});
   stadiumName = $stadiumImg.not('.invisible').attr('alt');
  console.log(stadiumName);
 }

因此，当我点击li部分时，只会在右侧显示带有数据城市值作为li tag文本的图像。但是，有两个图像将莫斯科视为data-city。这就是我在每个循环中添加第二个点击事件以显示第二个图像的原因。

每张图片的体育馆名称为alt值。我需要得到它们但问题是，我需要在attr()侦听器中click方法获取第二个莫斯科图像（斯巴达克竞技场）的alt值，但此代码返回alt值两次。

为什么我会两次获得alt值？如果我想要那个，我该怎么办？

课程invisible == display.none