Question

我还是比较新的jQuery和学习，我已经创建了下面的代码/脚本来完成我需要的东西，但是我必须为我添加的每个选择器和目标创建一个新函数，代码将会很长最后，因为我打算至少有10个选择器和目标。

因此，当您将鼠标悬停在选择器（按钮）上时，它会向该按钮添加一个活动类（将其从其他按钮中移除）并保持打开直到您选择另一个按钮，同时切换目标（在这种情况下不同的img））。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<style>
body {
    background:grey;
}
#terrace-fw-wrap {
    display:block; 
    width:100%;
    max-width:600px;
    margin: auto;
    text-align: center;
}

#terrace-fw-wrap .content {
    display:block; 
    width:100%;
}

#terrace-fw-wrap .content .img {
    display:none; 
    width:100%;
}

.active-img {
    display:block !important; 
    width:100% !important;
}

#terrace-fw-wrap .buttons .but {
    display:inline-block; 
    width:150px;
    padding:10px;
    margin:10px;
    text-align: center;
    color:black;
    background:white;

}

#terrace-fw-wrap .buttons .but:hover {
    color:white;
    background:black;
    cursor: pointer;
}

.active-but {
    color:white !important;
    background:black !important;

}

</style>

<section id="terrace-fw-wrap">
    <section class="content">
        <img class="img img1 active-img" src="http://s9.postimg.org/oatcz7bpr/img1.jpg" />
        <img class="img img2" src="http://s9.postimg.org/6314c1xxr/img2.jpg" />
        <img class="img img3" src="http://s30.postimg.org/llqz7e7yp/img3.jpg" />
    </section>
    <div class="buttons">
        <div class="but but1">
            Button 1
        </div>
        <div class="but but2">
            Button 2
        </div>
        <div class="but but3">
            Button 3
        </div>
    </div>
</section>


<script>
$(function(){
    $('.but1').hover(function(){
      $('.img1').addClass('active-img');
      $('.img2').removeClass('active-img');
      $('.img3').removeClass('active-img');
      $('.but1').addClass('active-but');
      $('.but2').removeClass('active-but');
      $('.but3').removeClass('active-but');
    });        
});

$(function(){
    $('.but2').hover(function(){
      $('.img2').addClass('active-img');
      $('.img1').removeClass('active-img');
      $('.img3').removeClass('active-img');
      $('.but2').addClass('active-but');
      $('.but1').removeClass('active-but');
      $('.but3').removeClass('active-but');
    });        
});

$(function(){
    $('.but3').hover(function(){
      $('.img3').addClass('active-img');
      $('.img1').removeClass('active-img');
      $('.img2').removeClass('active-img');
      $('.but3').addClass('active-but');
      $('.but1').removeClass('active-but');
      $('.but2').removeClass('active-but');
    });        
});
</script>

jsfiddle：https://jsfiddle.net/8btdeftu/

有没有办法改变它，所以我可以添加尽可能多的相应选择器和目标，而无需在脚本中添加新函数？

由于

Answer 1

所做的更改

HTML

►将data-img=""添加到所有按钮，并显示相应的图像

<强>解决方案

$(function(){
    $('.but1,.but2,.but3').hover(function(){
        $('.img').removeClass('active-img');
        var img = $(this).data('img')
        $("."+img).addClass('active-img');
        $('.but').removeClass('active-but');
        $(this).addClass('active-but');
    });        
});

<强> Demo Fiddle

Answer 2

查看此Javascript，您可以根据需要添加任意数量的按钮和图片，只要您将data-image="imageID"添加到按钮，并为<img>提供ID以链接这两个按钮和图像。

使用$(this)反映了刚刚悬停的按钮。

$('.but').hover(function() {
    $('.but').removeClass('active-but');
    $(this).addClass('active-but');
    $('img').removeClass('active-img');
    $('#'+ $(this).attr('data-image')).addClass('active-img');
});

Demo Fiddle

Answer 3

请使用此代码，它肯定会有效。

<section id="terrace-fw-wrap">
    <section class="content">
        <img class="img img1 active-img" src="http://s9.postimg.org/oatcz7bpr/img1.jpg" />
        <img class="img img2" src="http://s9.postimg.org/6314c1xxr/img2.jpg" />
        <img class="img img3" src="http://s30.postimg.org/llqz7e7yp/img3.jpg" />
    </section>
    <div class="buttons">
        <div class="but but1" data-img="img1">
            Button 1
        </div>
        <div class="but but2" data-img="img2">
            Button 2
        </div>
        <div class="but but3" data-img="img3">
            Button 3
        </div>
    </div>
</section>
<script>
$(document).ready(function() {
    $(".but").hover(function(){
        $(".but").removeClass("active-but");
        $(this).toggleClass("active-but");

        var imgSelector = "." + $(this).data("img");
        $(".img").removeClass("active-img");
        $(imgSelector).toggleClass("active-img");
    });
});
</script>

Answer 4

您应该使用activityType。

以下是此解决方案的HTML和JS：

toggleClass

改进许多相应div的jQuery

4 个答案: