Question

当您点击侧边栏的左侧时，我尝试制作过渡效果。

例如，如果您点击Ottogi（拉面面条的名字），它应该更改背景图片，如果您想了解Sajo hapyo（ramen noodle＆＃39） ; s name），它也应该改变背景图像。基本上适用于侧边栏中的所有图片（eg. natura，maloo，dongush，may）。

我的程序会更改背景图像，但只要用户想要点击ottogi，它就会停止，它就会停止。所以，我猜测我应该使用条件语句或循环，因为它基本上做同样的事情。请帮助我，我努力奋斗。

这是我工作的网站http://test1.testkz.ru/

HTML

<section id="main-showcase">
<div class="showcase-wrapper">
    <div class="left-main col-lg-3 col-md-3">
        <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
        <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
        <div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
        <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
        <div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
        <div class="shadow-effect"><p class="may">ООО Май</p></div>
    </div>
    <div class="right-main col-lg-9 col-md-9">
        <div class="inner-container">
            <h1>Ottogi</h1>
            <h2>Южно - Корейские продукты питания высочайшего качества!</h2>
        </div>
        <div class="box-container">
            <div class="main-wrap">
                <div id="main-slider" class="first-slider">
                    [[getImageList?
                        &tvname=`goods`
                        &tpl=`goodsSlider.tpl`
                    ]]
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.ottogi-bg {
    background: url('/assets/template/images/main_03.jpg') no-repeat center;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.sajo-bg {
    background: url('../images/about-us-company-bg.jpg');
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

JS

 $('p.ottogi').click(function(){
    $('.right-main').addClass('ottogi-bg');
});
$('p.sajo').click(function(){
    $('.right-main').addClass('sajo-bg');
});

Answer 1

原因是您继续将类添加到.right-main类。这意味着您最终得到：.right-main .ottogi-bg .sajo-bg。因为sajo-bg是你在CSS中定义的最后一个类，所以它总是会超过ottori-bg类。

你可以试试这个：

$('.ottogi').click(function(){
    $('.right-main').removeClass().addClass("right-main ottogi-bg");    
});
$('.sajo').click(function(){    
    $('.right-main').removeClass().addClass("right-main sajo-bg");    
});

.right-main{
  background-color:grey;
  padding:20px;
}
.ottogi-bg{
  background-color:blue;
}
.sajo-bg{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="ottogi">ottogi</a><br/>
<a href="#" class="sajo">sajo</a><br/>
<div class="right-main">
  Test
</div>

使用此功能，您可以确保删除以前的类，然后您可以添加所需的类。

Answer 2

我认为问题是JavaScript代码。

如果用户单击ottogi，则单击“sajo”。

.right-main div添加了ottogi-bg class
.right-main div添加了sajo-bg class

两次点击后，.right-main有两个类。也许客户方面很困惑。

这个解决方案就像......

设置下面的代码

$('.right-main').removeClass('sajo-bj');

后

$('.right-main').addClass('ottogi-bg');

如何使用Jquery进行动态转换效果？

2 个答案: